/* =============================================
   《创始人实战手册》— Notion 风格排版
   适配 mdBook 0.5.2
   ============================================= */

/* ============================================
   实战教程卡片 — Tutorial Cards
   ============================================ */
.tutorial-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 32px;
}

.tutorial-cards--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tutorial-card {
    display: block;
    padding: 20px 24px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none !important;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.tutorial-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.2s ease;
}

.tutorial-card:hover {
    border-color: #c7522e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(199, 82, 46, 0.08);
    text-decoration: none !important;
}

.tutorial-card:hover::before {
    background: #c7522e;
}

.tutorial-card--hero {
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 60%);
    border-color: #f4d4c5;
    padding: 28px 32px;
}

.tutorial-card--hero:hover {
    background: linear-gradient(135deg, #ffe9dc 0%, #fff5f0 60%);
}

.tutorial-card .card-tag {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.card-tag--orange {
    background: #fff0e6;
    color: #c7522e;
}

.card-tag--green {
    background: #e8f5ec;
    color: #2d8a4f;
}

.card-tag--blue {
    background: #e8f1fa;
    color: #2c6cad;
}

.tutorial-card .card-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        Georgia, serif !important;
}

.tutorial-card--hero .card-title {
    font-size: 24px !important;
}

.tutorial-card .card-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #555 !important;
    margin: 0 0 14px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", sans-serif !important;
}

.tutorial-card .card-desc strong {
    color: #c7522e !important;
    background: transparent !important;
    padding: 0 !important;
}

.tutorial-card .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f1ef;
    font-size: 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.tutorial-card .card-tech {
    color: #888 !important;
    font-family: "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.04em;
}

.tutorial-card .card-arrow {
    color: #c7522e !important;
    font-weight: 600;
    font-size: 12px !important;
    letter-spacing: 0.05em;
    transition: transform 0.2s ease;
}

.tutorial-card:hover .card-arrow {
    transform: translateX(4px);
}

/* 暗色主题 */
.navy .tutorial-card,
.coal .tutorial-card,
.ayu .tutorial-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.navy .tutorial-card:hover,
.coal .tutorial-card:hover,
.ayu .tutorial-card:hover {
    border-color: #ff8c5a;
    background: rgba(255, 140, 90, 0.05);
    box-shadow: 0 6px 20px rgba(255, 140, 90, 0.1);
}

.navy .tutorial-card:hover::before,
.coal .tutorial-card:hover::before,
.ayu .tutorial-card:hover::before {
    background: #ff8c5a;
}

.navy .tutorial-card--hero,
.coal .tutorial-card--hero,
.ayu .tutorial-card--hero {
    background: linear-gradient(135deg, rgba(255, 140, 90, 0.08) 0%, rgba(255, 255, 255, 0.02) 60%);
    border-color: rgba(255, 140, 90, 0.25);
}

.navy .tutorial-card .card-title,
.coal .tutorial-card .card-title,
.ayu .tutorial-card .card-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

.navy .tutorial-card .card-desc,
.coal .tutorial-card .card-desc,
.ayu .tutorial-card .card-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

.navy .tutorial-card .card-desc strong,
.coal .tutorial-card .card-desc strong,
.ayu .tutorial-card .card-desc strong {
    color: #ff8c5a !important;
}

.navy .tutorial-card .card-meta,
.coal .tutorial-card .card-meta,
.ayu .tutorial-card .card-meta {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.navy .tutorial-card .card-tech,
.coal .tutorial-card .card-tech,
.ayu .tutorial-card .card-tech {
    color: rgba(255, 255, 255, 0.45) !important;
}

.navy .tutorial-card .card-arrow,
.coal .tutorial-card .card-arrow,
.ayu .tutorial-card .card-arrow {
    color: #ff8c5a !important;
}

.navy .card-tag--orange, .coal .card-tag--orange, .ayu .card-tag--orange {
    background: rgba(255, 140, 90, 0.15);
    color: #ff8c5a;
}

.navy .card-tag--green, .coal .card-tag--green, .ayu .card-tag--green {
    background: rgba(74, 200, 130, 0.15);
    color: #4ac882;
}

.navy .card-tag--blue, .coal .card-tag--blue, .ayu .card-tag--blue {
    background: rgba(94, 158, 220, 0.15);
    color: #5e9edc;
}

/* 移动端：卡片网格变单列 */
@media (max-width: 768px) {
    .tutorial-cards--grid {
        grid-template-columns: 1fr;
    }
    .tutorial-card {
        padding: 18px 20px;
    }
    .tutorial-card--hero {
        padding: 22px 24px;
    }
    .tutorial-card .card-title {
        font-size: 17px !important;
    }
    .tutorial-card--hero .card-title {
        font-size: 21px !important;
    }
    .tutorial-card .card-desc {
        font-size: 13px !important;
    }
}

/* ============================================
   封面专属样式
   ============================================ */
.book-cover {
    text-align: center;
    padding: 80px 0 60px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ececec;
}

.book-cover .book-tag {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: #c7522e;
    padding: 6px 14px;
    border: 1px solid #c7522e;
    border-radius: 2px;
    margin-bottom: 36px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.book-cover .book-title {
    font-size: 56px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    color: #1a1a1a !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        Georgia, serif !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    border: none !important;
}

.book-cover .book-subtitle {
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #555 !important;
    letter-spacing: 0.12em;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        Georgia, serif !important;
}

.book-cover .book-meta {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #999 !important;
    letter-spacing: 0.08em;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic;
}

.book-cover .book-divider {
    width: 60px;
    height: 2px;
    background: #c7522e;
    margin: 36px auto 28px;
}

.book-cover .book-tagline {
    font-size: 15px !important;
    color: #666 !important;
    letter-spacing: 0.06em;
    line-height: 2 !important;
    margin: 0 !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, serif !important;
}

/* 暗色主题封面 */
.navy .book-cover, .coal .book-cover, .ayu .book-cover {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.navy .book-cover .book-title,
.coal .book-cover .book-title,
.ayu .book-cover .book-title {
    color: rgba(255, 255, 255, 0.96) !important;
}

.navy .book-cover .book-subtitle,
.coal .book-cover .book-subtitle,
.ayu .book-cover .book-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

.navy .book-cover .book-meta,
.coal .book-cover .book-meta,
.ayu .book-cover .book-meta {
    color: rgba(255, 255, 255, 0.4) !important;
}

.navy .book-cover .book-tagline,
.coal .book-cover .book-tagline,
.ayu .book-cover .book-tagline {
    color: rgba(255, 255, 255, 0.7) !important;
}

.navy .book-cover .book-tag,
.coal .book-cover .book-tag,
.ayu .book-cover .book-tag {
    color: #ff8c5a;
    border-color: #ff8c5a;
}

.navy .book-cover .book-divider,
.coal .book-cover .book-divider,
.ayu .book-cover .book-divider {
    background: #ff8c5a;
}


:root {
    --content-max-width: 860px;
    --sidebar-width: 300px;
}

/* ============================================
   全局基础
   ============================================ */
html {
    font-size: 18px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ============================================
   正文容器
   ============================================ */
.content {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        "STSong", "SimSun", Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    line-height: 1.85 !important;
    letter-spacing: 0.02em;
    color: #2c2c2c !important;
    padding: 0 2rem;
}

.content main {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 80px;
}

.content p {
    font-size: 17px !important;
    line-height: 1.85 !important;
    margin-bottom: 18px;
}

/* ============================================
   标题层级
   ============================================ */
.content h1 {
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    border-bottom: none !important;
    margin-top: 12px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    padding-top: 8px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    border-bottom: 2px solid #ececec !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        Georgia, serif !important;
}

.content h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 48px;
    margin-bottom: 18px;
    padding-bottom: 0;
    border-bottom: none !important;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        Georgia, serif !important;
}

.content h3 {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 36px;
    margin-bottom: 14px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        Georgia, serif !important;
}

.content h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #37352f !important;
    margin-top: 28px;
    margin-bottom: 10px;
}

/* ============================================
   引用块 — Callout 风格
   ============================================ */
.content blockquote {
    border-left: 3px solid #2eaadc;
    background: #f7faff !important;
    padding: 16px 22px !important;
    margin: 24px 0;
    border-radius: 0 4px 4px 0;
    font-size: 16px !important;
    color: #444 !important;
    line-height: 1.8 !important;
    font-style: normal;
}

.content blockquote p {
    font-size: 16px !important;
    margin-bottom: 8px;
    color: #444 !important;
}

.content blockquote p:last-child {
    margin-bottom: 0;
}

.content blockquote strong {
    color: #1a1a1a !important;
}

/* ============================================
   分隔线
   ============================================ */
.content hr {
    border: none !important;
    height: 1px;
    background-color: #ececec;
    margin: 40px 0;
}

/* ============================================
   列表
   ============================================ */
.content ul, .content ol {
    padding-left: 28px;
    margin-bottom: 18px;
    font-size: 17px !important;
}

.content li {
    font-size: 17px !important;
    margin-bottom: 8px;
    line-height: 1.85 !important;
    color: #2c2c2c !important;
}

.content li > p {
    font-size: 17px !important;
    margin-bottom: 6px;
}

/* ============================================
   强调
   ============================================ */
.content strong {
    color: #1a1a1a !important;
    font-weight: 700;
    background: linear-gradient(180deg, transparent 60%, #fff5b1 60%);
    padding: 0 1px;
}

.content em {
    color: #2c2c2c;
    font-style: italic;
}

/* ============================================
   代码 — Anthropic 橙红风格
   ============================================ */
.content code {
    background: #f5f3ee;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.92em !important;
    color: #c7254e;
    font-family: "SF Mono", Menlo, Consolas, "PT Mono", monospace !important;
    border: 1px solid #ebe9e3;
}

.content pre {
    background: #fafaf7 !important;
    border: 1px solid #ebe9e3;
    border-radius: 6px;
    padding: 16px 20px !important;
    margin: 18px 0;
    line-height: 1.6;
}

.content pre code {
    background: transparent !important;
    border: none !important;
    color: #37352f !important;
    padding: 0 !important;
    font-size: 14px !important;
}

/* ============================================
   链接
   ============================================ */
.content a {
    color: #2c2c2c !important;
    text-decoration: underline;
    text-decoration-color: rgba(44, 44, 44, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}

.content a:hover {
    text-decoration-color: #c7522e;
    color: #c7522e !important;
}

/* ============================================
   表格 — Notion 极简
   ============================================ */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 16px !important;
}

.content table thead {
    background: #fafaf7;
}

.content table th {
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid #ececec;
    color: #37352f;
    font-size: 15px !important;
}

.content table td {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f1ef;
    color: #37352f !important;
    font-size: 16px !important;
}

.content table tbody tr:hover {
    background: #fafaf7;
}

/* ============================================
   侧边栏
   ============================================ */
.sidebar {
    font-size: 14px !important;
    background: #fbfbfa !important;
    border-right: 1px solid #f1f1ef !important;
}

.sidebar .sidebar-scrollbox {
    padding: 16px 12px;
}

.chapter {
    list-style: none;
    padding-left: 0;
}

.chapter li {
    margin-bottom: 2px;
    line-height: 1.5;
}

.chapter li a, .chapter li > a {
    font-size: 14px !important;
    padding: 6px 12px !important;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: block;
    color: #4a4a4a !important;
    letter-spacing: 0.02em;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", sans-serif !important;
    text-decoration: none;
    line-height: 1.5;
}

.chapter li a:hover {
    background-color: rgba(55, 53, 47, 0.06);
    color: #1a1a1a !important;
    text-decoration: none;
}

.chapter li.active > a,
.chapter li > a.active {
    color: #1a1a1a !important;
    font-weight: 700;
    background-color: rgba(55, 53, 47, 0.08);
}

.chapter li.part-title {
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #888 !important;
    margin-top: 22px;
    margin-bottom: 6px;
    padding: 0 12px;
    text-transform: uppercase;
}

/* ============================================
   导航箭头
   ============================================ */
.nav-chapters {
    opacity: 0.25;
    transition: opacity 0.2s ease;
}

.nav-chapters:hover {
    opacity: 0.7;
}

/* ============================================
   顶部菜单栏
   ============================================ */
#menu-bar, .menu-bar {
    background: #fbfbfa !important;
    border-bottom: 1px solid #f1f1ef !important;
}

.menu-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
        Georgia, serif !important;
    color: #1a1a1a !important;
}

/* ============================================
   暗色主题适配
   ============================================ */
.navy, .coal, .ayu {
    --bg: #1a1a1a;
}

.navy .content, .coal .content, .ayu .content {
    color: rgba(255, 255, 255, 0.88) !important;
}

.navy .content h1, .coal .content h1, .ayu .content h1,
.navy .content h2, .coal .content h2, .ayu .content h2,
.navy .content h3, .coal .content h3, .ayu .content h3,
.navy .content h4, .coal .content h4, .ayu .content h4 {
    color: rgba(255, 255, 255, 0.96) !important;
}

.navy .content h1, .coal .content h1, .ayu .content h1 {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.navy .content p, .coal .content p, .ayu .content p,
.navy .content li, .coal .content li, .ayu .content li {
    color: rgba(255, 255, 255, 0.85) !important;
}

.navy .content strong, .coal .content strong, .ayu .content strong {
    color: rgba(255, 255, 255, 0.98) !important;
    background: linear-gradient(180deg, transparent 60%, rgba(255, 245, 177, 0.25) 60%);
}

.navy .content blockquote, .coal .content blockquote, .ayu .content blockquote {
    border-left-color: #4a9eff;
    background: rgba(74, 158, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.navy .content blockquote p, .coal .content blockquote p, .ayu .content blockquote p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.navy .content hr, .coal .content hr, .ayu .content hr {
    background-color: rgba(255, 255, 255, 0.12);
}

.navy .content a, .coal .content a, .ayu .content a {
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

.navy .content a:hover, .coal .content a:hover, .ayu .content a:hover {
    color: #ffa974 !important;
    text-decoration-color: #ffa974;
}

.navy .content code, .coal .content code, .ayu .content code {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ff7b72;
}

.navy .content pre, .coal .content pre, .ayu .content pre {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

.navy .content pre code, .coal .content pre code, .ayu .content pre code {
    color: rgba(255, 255, 255, 0.88) !important;
}

.navy .content table th, .coal .content table th, .ayu .content table th {
    color: rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

.navy .content table td, .coal .content table td, .ayu .content table td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85) !important;
}

.navy .content table tbody tr:hover, .coal .content table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* 暗色主题侧边栏 */
.navy .sidebar, .coal .sidebar, .ayu .sidebar {
    background: #14181f !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

.navy .chapter li a, .coal .chapter li a, .ayu .chapter li a {
    color: rgba(255, 255, 255, 0.6) !important;
}

.navy .chapter li a:hover, .coal .chapter li a:hover, .ayu .chapter li a:hover {
    color: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 255, 255, 0.06);
}

.navy .chapter li.active > a, .coal .chapter li.active > a, .ayu .chapter li.active > a {
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.08);
}

.navy .chapter li.part-title, .coal .chapter li.part-title {
    color: rgba(255, 255, 255, 0.35) !important;
}

.navy #menu-bar, .coal #menu-bar, .ayu #menu-bar,
.navy .menu-bar, .coal .menu-bar, .ayu .menu-bar {
    background: #14181f !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.navy .menu-title, .coal .menu-title, .ayu .menu-title {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* ============================================
   Light/Rust 主题精调
   ============================================ */
.light, .rust {
    --bg: #ffffff !important;
    --fg: #2c2c2c !important;
    --sidebar-bg: #fbfbfa !important;
    --sidebar-fg: #4a4a4a !important;
    --sidebar-active: #1a1a1a !important;
}

/* ============================================
   移动端适配
   ============================================ */
@media (max-width: 768px) {
    html {
        font-size: 17px !important;
    }
    .content {
        font-size: 16px !important;
        padding: 0 16px;
    }
    .content p,
    .content li,
    .content blockquote,
    .content blockquote p {
        font-size: 16px !important;
    }
    .content h1 {
        font-size: 26px !important;
    }
    .content h2 {
        font-size: 22px !important;
    }
    .content h3 {
        font-size: 19px !important;
    }
    .content table {
        font-size: 14px !important;
    }
}

/* ============================================
   打印优化
   ============================================ */
@media print {
    .content, .content p, .content li {
        font-size: 11pt !important;
        line-height: 1.6;
        color: #000 !important;
    }
    .content a {
        color: #000 !important;
    }
    .content blockquote {
        border-left-color: #999;
        background: #f5f5f5 !important;
    }
}