:root {
    --c-primary: #00a4ff;
    --c-text: #1e293b;
    --c-text-muted: #64748b;
    --c-border: #e2e8f0;
    --c-bg-gray: #f8fafc;
    /* 代码视觉专用色，与通用色板解耦，便于整体调整代码观感 */
    --c-code-bg: #f6f8fa;
    --c-code-border: #d8dee4;
    --c-code-text: #334155;
    /* 版心宽度：为 1440px 及以上屏幕设计，左右各留 60px 安全边距 */
    --docs-max-width: 1320px;
    --docs-side-width: 220px;
}

* {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    color: var(--c-text);
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--c-primary);
    text-decoration: none;
}

a:hover {
    color: #0084cc;
}

/* ===== 顶部导航 ===== */
.docs-header {
    border-bottom: 1px solid var(--c-border);
    background: #fff;
}

.docs-header__inner {
    max-width: var(--docs-max-width);
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.docs-header__logo {
    display: flex;
    align-items: center;
}

/* 该 SVG 声明的固有尺寸（100x60）与 viewBox（349x120）比例不一致，
   只设高度会让内容按 100:60 留白、logo 变小，因此宽高同时指定为 viewBox 比例 */
.docs-header__logo img {
    display: block;
    width: 93px;
    height: 32px;
}

.docs-header__logo:hover {
    opacity: .8;
}

.docs-nav,
.docs-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-nav {
    display: flex;
    align-items: center;
}

.docs-nav > li {
    position: relative;
    margin-left: 32px;
}

.docs-nav > li > a {
    color: var(--c-text);
    font-size: 15px;
    padding: 6px 0;
}

.docs-nav > li > a:hover,
.docs-nav > li > a.is-active {
    color: var(--c-primary);
}

.docs-nav > li > a.is-active:after {
    content: '';
    display: block;
    height: 2px;
    background: var(--c-primary);
}

.docs-nav__more:hover .docs-submenu {
    display: block;
}

.docs-submenu {
    display: none;
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 1rem 0 rgba(55, 66, 88, .12);
    white-space: nowrap;
    z-index: 10;
}

.docs-submenu > li > a {
    display: block;
    padding: 8px 18px;
    color: var(--c-text);
}

.docs-submenu > li > a:hover {
    background: var(--c-primary);
    color: #fff;
}

/* ===== 布局 ===== */
.docs-layout {
    max-width: var(--docs-max-width);
    margin: 0 auto;
    padding: 24px 20px 48px;
    display: flex;
    align-items: flex-start;
}

.docs-sidebar {
    width: var(--docs-side-width);
    flex: 0 0 var(--docs-side-width);
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-right: 16px;
    border-right: 1px solid var(--c-border);
}

.docs-sidebar__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.docs-catalog {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-catalog__item > a {
    display: block;
    padding: 5px 10px;
    border-radius: 4px;
    color: var(--c-text);
    font-size: 14px;
}

.docs-catalog__item > a:hover {
    background: var(--c-bg-gray);
    color: var(--c-primary);
}

.docs-catalog__item.is-active > a {
    background: #e8f6ff;
    color: var(--c-primary);
    font-weight: 600;
}

.docs-catalog__item--level2 > a {
    padding-left: 26px;
    font-size: 13px;
    color: var(--c-text-muted);
}

.docs-main {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 32px;
    padding-right: 32px;
}

/* 右侧本页目录 */
.docs-toc {
    flex: 0 0 var(--docs-side-width);
    width: var(--docs-side-width);
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-left: 24px;
    border-left: 1px solid var(--c-border);
    font-size: 14px;
}

.docs-breadcrumb {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-bottom: 16px;
}

.docs-breadcrumb span {
    margin: 0 6px;
}

.docs-toc__title {
    margin: 0 0 6px;
    font-weight: 700;
}

.docs-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-toc a {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    color: var(--c-text);
}

/* 目录只区分两级：h2 为一级，h3 缩进一级并弱化字号与颜色。
   选择器需带 .docs-toc 前缀（0-2-1），否则会被上面的 .docs-toc a 覆盖 */
.docs-toc .docs-toc__item--level3 > a {
    padding-left: 16px;
    font-size: 13px;
    color: var(--c-text-muted);
}

/* 每个 h2 分组之间留出间距，便于长目录扫读 */
.docs-toc__item--level2:not(:first-child) {
    margin-top: 6px;
}

/* ===== 正文排版 ===== */
.docs-content {
    word-wrap: break-word;
}

.docs-content > *:first-child {
    margin-top: 0;
}

.docs-content h1 {
    font-size: 28px;
    margin-top: 24px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border);
}

.docs-content h2 {
    font-size: 22px;
    margin: 16px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-border);
}

.docs-content h3 {
    font-size: 18px;
    margin: 28px 0 12px;
}

.docs-content h4 {
    font-size: 16px;
    margin: 24px 0 10px;
}

.docs-content p {
    margin: 12px 0;
}

.docs-content ul,
.docs-content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.docs-content li {
    margin: 4px 0;
}

.docs-content img {
    max-width: 100%;
    border: 1px solid var(--c-border);
    border-radius: 6px;
}

.docs-content blockquote {
    margin: 16px 0;
    padding: 8px 16px;
    border-left: 4px solid var(--c-border);
    background: var(--c-bg-gray);
    color: var(--c-text-muted);
}

/* ===== 代码视觉 =====
   1. 行内代码与代码块共用同一等宽字体栈和字号，避免两处分别声明导致漂移
   2. 填充对比随面积递减：行内代码面积小，需要更强的填充才能被注意到；
      代码块面积大，用更浅的填充 + 一道边框即可自成一体，过重会压住正文
   3. 块级元素（代码块、提示块）统一 6px 圆角，行内代码 4px */
.docs-content code,
.docs-content pre {
    font-family: Menlo, Consolas, 'Courier New', monospace;
    font-size: 13px;
}

.docs-content code {
    background: #f1f5f9;
    color: #c2255c;
    padding: 2px 6px;
    border-radius: 4px;
}

.docs-content pre {
    background: var(--c-code-bg);
    color: var(--c-code-text);
    border: 1px solid var(--c-code-border);
    padding: 16px;
    margin: 16px 0;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.6;
    tab-size: 4;
}

.docs-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* 语法配色：按语义角色分配色相，一个角色固定一个色相，而不是逐个 token 挑颜色。
   基色 #334155（9.7:1）略强于各强调色（4.7~6.3:1），使着色靠色相区分而非靠明度堆叠，
   所有 token 均达到 WCAG AA（≥4.5:1） */
.hljs-comment,
.hljs-quote {
    color: #5f6b7a;
    font-style: italic;
}

/* 元信息：<?php 标记、doctype、shebang、注解标记 */
.hljs-meta,
.hljs-doctag {
    color: #5f6b7a;
}

/* 声明与内置：关键字、类型、字面值、内置函数、标签 */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-template-tag,
.hljs-meta-keyword {
    color: #7c3aed;
}

/* 数据字面量：字符串、正则、新增行 */
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-meta .hljs-string,
.hljs-char.escape_ {
    color: #15803d;
}

/* 数值与符号 */
.hljs-number,
.hljs-symbol,
.hljs-bullet {
    color: #b45309;
}

/* 标识符：函数名、类名、属性、变量、参数、选择器 */
.hljs-title,
.hljs-name,
.hljs-function,
.hljs-section,
.hljs-class,
.hljs-params,
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-property,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: #1d4ed8;
}

/* 差异：删除行 */
.hljs-deletion {
    color: #b91c1c;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}

.doc-table {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
    display: block;
    overflow-x: auto;
}

.doc-table th,
.doc-table td {
    border: 1px solid var(--c-border);
    padding: 8px 12px;
    text-align: left;
    font-size: 14px;
}

.doc-table th {
    background: var(--c-bg-gray);
    font-weight: 600;
}

.docs-content hr {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 28px 0;
}

/* GitBook 风格提示块 */
.doc-callout {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--c-primary);
    background: #f1f8ff;
    border-radius: 0 6px 6px 0;
}

.doc-callout > *:first-child {
    margin-top: 0;
}

.doc-callout > *:last-child {
    margin-bottom: 0;
}

/* 提示块内的行内代码与文字同一行显示 */
.doc-callout code,
.doc-callout span {
    display: inline;
    white-space: normal;
    overflow-wrap: break-word;
}

.doc-callout img {
    max-width: 100%;
    vertical-align: middle;
}

.doc-callout--danger {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.doc-callout--warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.doc-callout--success {
    border-left-color: #10b981;
    background: #ecfdf5;
}

.docs-updated {
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: 13px;
}

.docs-footer {
    border-top: 1px solid var(--c-border);
    padding: 20px;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 13px;
}

@media (max-width: 1280px) {
    .docs-layout {
        flex-wrap: wrap;
    }

    /* 窄屏时本页目录移到正文下方 */
    .docs-toc {
        flex: 1 1 100%;
        width: auto;
        position: static;
        max-height: none;
        overflow: visible;
        padding: 16px 0 0;
        margin-top: 24px;
        border-left: none;
        border-top: 1px solid var(--c-border);
    }
}

@media (max-width: 860px) {
    .docs-layout {
        display: block;
        padding: 16px;
    }

    .docs-sidebar {
        width: auto;
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--c-border);
        padding: 0 0 16px;
        margin-bottom: 16px;
    }

    .docs-main {
        padding-left: 0;
    }

    .docs-header__inner {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .docs-nav > li {
        margin: 0 16px 0 0;
    }

    .docs-nav {
        flex-wrap: wrap;
    }
}