/* ===== Content Styles ===== */
*,*::before,*::after{box-sizing:border-box}

:root {
    --accent: #3db8bf;
    --accent-deep: #089ba3;
    --accent-light: #e0f7f8;
    --accent-soft: #b8ecef;
    --accent-wash: #7aeaf018;
}

/* -- Layout -- */
html{overflow-x:hidden}
body.typora-export {
    padding: 0; margin: 0; overflow-x: hidden; max-width: 100vw;
    font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
    font-size: 16px; line-height: 1.9; color: #333;
    background: url(Stitch_pc.png) center/cover fixed;
}
#write {
    max-width: 860px; width: 74%; margin: 30px auto 40px;
    padding: 48px 7% 80px; border-radius: 16px;
    box-sizing: border-box;
    background: rgba(255,255,255,.50);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 30px rgba(0,0,0,.1);
}

/* -- Headings -- */
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6 {
    scroll-margin-top: 80px;
}
#write h1 {
    font-size: 1.7rem; margin: 1.6rem auto 1rem; color: #1a2a3a;
    text-align: center; position: relative; padding-bottom: 14px;
}
#write h1::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 50px; height: 4px; border-radius: 2px;
    background: linear-gradient(to right, #80F7C4, #3DB8D3);
}
#write h2 {
    font-size: 1.35rem; margin: 1.4rem 0 .8rem; color: #fff;
    padding: 6px 16px; border-radius: 6px; width: fit-content; max-width: 100%;
    background: linear-gradient(to right, #80F7C4, #3DB8D3, #80F7C4);
}
#write h3 { font-size: 1.2rem; margin: 1.2rem 0 .6rem; color: #2a3a4a; }
#write h3::before { content: "✦ "; color: var(--accent); }
#write h4 { font-size: 1.05rem; margin: 1rem 0 .5rem; color: #3a4a5a; }
#write h4::before { content: "✦✦ "; color: var(--accent); }
#write h5 { font-size: .95rem; margin: .8rem 0 .4rem; color: #444; }
#write h5::before { content: "✦✦✦ "; color: var(--accent); }
#write h6 {
    font-size: .9rem; margin: .8rem 0 .4rem; color: #555;
    display: block; line-height: 1.5;
}
#write h6::before { content: "✦✦✦\\A✦✦✦ "; color: var(--accent); white-space: pre; }

/* -- Article metadata -- */
.article-meta {
    background: rgba(232,244,246,.4); border: 1px solid var(--accent-soft); border-radius: 10px;
    padding: 16px 20px; margin: 0 0 1.5rem; font-size: .88rem; line-height: 1.6;
}
.meta-item { display: flex; gap: 8px; margin: 3px 0; align-items: baseline; }
.meta-label {
    color: var(--accent); font-weight: 600; min-width: 40px; flex-shrink: 0;
}
.meta-label::after { content: "："; }
.meta-value { color: #555; }
.tag {
    display: inline-block; background: var(--accent-light); color: var(--accent-deep);
    padding: 1px 8px; border-radius: 10px; margin: 1px 4px 1px 0; font-size: .82rem;
}

/* -- Paragraph -- */
#write p { margin: .8rem 0; }

/* -- Links -- */
#write a {
    color: var(--accent); text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .2s;
}
#write a:hover { border-bottom-color: var(--accent); }
#write a:visited { color: #5a9f9f; }
#write p a::before, #write li a::before {
    content: ""; display: inline-block; width: 1em; height: 1em;
    margin-right: 2px; vertical-align: -.12em;
    background-color: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E") no-repeat center/contain;
}
#write a:hover::before { transform: rotate(180deg); }
.toc a::before, .md-toc a::before, .toc-sidebar a::before { display: none !important; }

/* -- Bold -- */
#write strong {
    color: var(--accent-deep); font-weight: 700;
    border-bottom: 2px solid transparent; transition: border-color .2s;
}
#write strong:hover { border-bottom-color: var(--accent-soft); }

/* -- Italic -- */
#write em {
    font-style: italic; color: #666;
    background: linear-gradient(-45deg, transparent 35%, var(--accent-soft) 35%, var(--accent-soft) 65%, transparent 65%);
    background-repeat: repeat-x; background-position: 0 100%; background-size: 6px 3px;
    padding: 0 2px 1px;
}

/* -- Strikethrough -- */
#write del, #write s { text-decoration: line-through; text-decoration-color: var(--accent-deep); color: #999; }

/* -- Highlight (==text==) -- */
#write mark {
    background: none; color: inherit; padding: 0 2px; border-radius: 3px;
    background-image: linear-gradient(to top, var(--accent-soft), var(--accent-soft));
    background-repeat: no-repeat; background-position: 0 100%;
    background-size: 100% 38%; transition: background-size .25s ease;
}
#write mark:hover { background-size: 100% 100%; }

/* -- Blockquote -- */
#write blockquote {
    position: relative; border-left: 4px solid #52b788;
    margin: 1.2rem 0; padding: 14px 18px 14px 44px;
    background: #f6faf8; color: #5a7a6a;
    border-radius: 0 10px 10px 0; overflow: hidden;
}
#write blockquote::before {
    content: "✦";
    position: absolute; left: 12px; top: 14px;
    font-size: 18px; color: #52b788; opacity: .65;
}
#write blockquote p { margin: .4rem 0; }
#write blockquote p:last-child { margin-bottom: 0; }

/* -- Horizontal rule -- */
#write hr {
    border: none; border-top: 2px dashed var(--accent-soft);
    margin: 2rem auto; width: 88%;
}

/* -- Lists -- */
#write ol, #write ul { padding-left: 1.8rem; margin: .6rem 0; }
#write li { margin: .35rem 0; line-height: 1.75; }
#write ul { list-style-type: disc; }
#write ul ul { list-style-type: circle; }
#write ul ul ul { list-style-type: square; }
#write ol { list-style-type: decimal; }
#write ol ol { list-style-type: lower-alpha; }
#write li > p { margin: .2rem 0; }
::marker { color: var(--accent); }

/* -- Task list -- */
#write .task-list-item { list-style: none; margin-left: -1.2rem; }
#write .task-list-item input { margin-right: 6px; accent-color: var(--accent); }

/* -- Inline code -- */
#write :not(pre):not(.highlight) > code {
    font-family: Consolas,"Courier New",monospace;
    font-size: .88em; color: var(--accent-deep); background: var(--accent-light);
    padding: 2px 7px; border-radius: 5px; border: 1px solid var(--accent-soft);
}

/* -- Fenced code blocks -- */
#write .highlight {
    background: rgba(250,250,250,.35); border: 1px solid #e0e0e0; border-left: 3px solid #ccc; border-radius: 6px;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    padding: 0 20px 16px; margin: 1rem 0; overflow-x: auto;
    font-size: .9rem; line-height: 1.65;
    font-family: Consolas,"Courier New",monospace; color: #333;
}
#write .highlight[data-lang="bash"]   { border-left-color: #3db8bf; }
#write .highlight[data-lang="yaml"]   { border-left-color: #e8a838; }
#write .highlight[data-lang="python"] { border-left-color: #3572A5; }
#write .highlight[data-lang="nginx"]  { border-left-color: #0e9046; }
#write .highlight[data-lang="docker"] { border-left-color: #0db7ed; }
#write .highlight[data-lang="html"]   { border-left-color: #e34c26; }
#write .highlight::before {
    content: attr(data-lang);
    display: block; color: #999; font-size: .7rem;
    letter-spacing: .5px; text-align: right;
    padding: 6px 0 10px;
}
#write .highlight[data-lang="bash"]::before   { color: #3db8bf; }
#write .highlight[data-lang="yaml"]::before   { color: #e8a838; }
#write .highlight[data-lang="python"]::before { color: #3572A5; }
#write .highlight[data-lang="nginx"]::before  { color: #0e9046; }
#write .highlight[data-lang="docker"]::before { color: #0db7ed; }
#write .highlight[data-lang="html"]::before   { color: #e34c26; }
#write .highlight pre { margin: 0; padding: 0; background: transparent; font-family: inherit; }
#write .highlight code { background: transparent !important; padding: 0; font-family: inherit; color: inherit !important; }
#write .highlight code:hover { background: transparent !important; color: inherit !important; transform: none !important; box-shadow: none !important; }
#write pre { white-space: pre; overflow-x: auto; }

/* -- Tables -- */
#write table {
    border-collapse: separate; border-spacing: 0; width: 100%;
    margin: 1rem 0; font-size: .9rem; line-height: 1.6;
    border: 1px solid var(--accent-soft); border-radius: 8px; overflow: hidden;
}
#write th, #write td {
    padding: 8px 14px; text-align: left;
    border-right: 1px solid #eee; border-bottom: 1px solid #eee;
}
#write th {
    background: var(--accent-light); color: var(--accent-deep);
    font-weight: 700; white-space: nowrap;
}
#write td:last-child, #write th:last-child { border-right: none; }
#write tr:last-child td { border-bottom: none; }

/* -- Pygments: vs -- */
.highlight .c,.highlight .ch,.highlight .cm,.highlight .cpf,.highlight .c1,.highlight .cs{color:#008000}
.highlight .cp{color:#00F}
.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .ow{color:#00F}
.highlight .kt,.highlight .nc{color:#2B91AF}
.highlight .s,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss,.highlight .se{color:#A31515}
.highlight .hll{background-color:#ffffcc}.highlight .err{border:1px solid #F00}
.highlight .ge{font-style:italic}.highlight .gs{font-weight:bold}.highlight .ges{font-weight:bold;font-style:italic}
.highlight .gh,.highlight .gp,.highlight .gu{font-weight:bold}

/* -- Images -- */
#write img { display:block; margin:0 auto; max-width: 100%; height: auto; max-height: 420px; border-radius: 6px; cursor: zoom-in; }

/* -- Image lightbox -- */
.lightbox { display: none; position: fixed; z-index: 9999; inset: 0; background: rgba(0,0,0,.85); cursor: zoom-out; }
.lightbox.show { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 95vw; max-height: 95vh; border-radius: 4px; box-shadow: 0 4px 30px rgba(0,0,0,.5); }

/* -- Inline TOC -- */
#write .toc, .md-toc {
    position: relative; overflow: hidden;
    background: #e8f4f6;
    background-image: radial-gradient(circle at -20% -40%, var(--accent-soft), transparent 50%),
                      radial-gradient(circle at 110% 180%, var(--accent-light), transparent 50%);
    border: 1px solid var(--accent-soft); border-radius: 16px;
    padding: 28px 22px 20px; margin: 1.5rem 0;
    font-size: .9rem; box-shadow: 0 4px 20px rgba(61,184,191,.08);
}
#write .toc::before, .md-toc::before {
    content: "📑 目录"; display: block; text-align: center;
    font-size: 1.2rem; font-weight: 700; color: var(--accent);
    margin-bottom: 18px; padding-bottom: 12px;
    border-bottom: 1px dashed var(--accent-soft); letter-spacing: 2px;
}
#write .toc ul, .md-toc ul { list-style: none; padding-left: 0; }
#write .toc li, .md-toc li { margin: 3px 0; }
#write .toc a, .md-toc a {
    color: #4a6a8a; border: none; display: block;
    padding: 4px 12px; border-radius: 20px; transition: all .2s;
}
#write .toc a:hover, .md-toc a:hover {
    color: var(--accent-deep); background: rgba(255,255,255,.8);
    padding-left: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
#write .toc ul ul, .md-toc ul ul { padding-left: 1.2rem; }
#write .toc ul ul ul, .md-toc ul ul ul { padding-left: 1rem; }

/* -- TOC sidebar (right side, collapsible) -- */
.toc-sidebar {
    position: fixed; top: 70px; left: 14px; z-index: 60;
    width: 250px; max-height: calc(100vh - 100px);
    background: rgba(232,244,246,.72); border: 1px solid var(--accent-soft); border-radius: 14px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 18px 14px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
    box-shadow: 0 4px 24px rgba(61,184,191,.12);
    font-size: .84rem; transition: transform .3s ease, opacity .3s ease;
}
.toc-sidebar::-webkit-scrollbar { display: none; }
.toc-sidebar::before {
    content: "📑 目录"; display: block; text-align: center;
    font-size: 1rem; font-weight: 700; color: var(--accent-deep);
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-soft); letter-spacing: 1px;
}
.toc-sidebar a {
    color: #3a5a6a; text-decoration: none; border: none;
    display: block; padding: 4px 10px; border-radius: 16px;
    transition: all .2s;
}
.toc-sidebar a:hover {
    color: var(--accent-deep); background: var(--accent-light);
    padding-left: 16px;
}
.toc-sidebar.collapsed { transform: translateX(calc(-100% - 30px)); opacity: 0; pointer-events: none; }
.toc-sidebar ul { list-style: none; padding-left: .5rem; margin: 0; }
.toc-sidebar li { margin: 2px 0; line-height: 1.5; }
.toc-sidebar a.active { color: #fff; background: var(--accent); font-weight: 600; }
.toc-sidebar ul ul { padding-left: .4rem; }
.toc-sidebar ul ul a { font-size: .82rem; color: #777; }
.toc-sidebar ul ul ul a { font-size: .78rem; color: #999; }

/* TOC toggle button */
.toc-toggle {
    position: fixed; top: 70px; left: 10px; z-index: 61;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: #fff; border: none;
    font-size: 1.1rem; cursor: pointer;
    box-shadow: 0 2px 10px rgba(61,184,191,.3);
    display: flex; align-items: center; justify-content: center;
    transition: left .25s ease;
}
.toc-toggle.shifted { left: 270px; }

@media screen and (max-width:860px) {
    .toc-sidebar { width: 220px; left: 4px; font-size: .8rem; }
    .toc-toggle.shifted { left: 234px; }
    #write { width: 94%; }
}
@media screen and (max-width:600px) {
    .toc-sidebar { width: 200px; top: 56px; max-height: calc(100vh - 80px); }
    .toc-toggle { top: 56px; left: 4px; }
    .toc-toggle.shifted { left: 210px; }
}

/* -- Responsive -- */
@media screen and (max-width:768px) {
    body.typora-export { background: url(Stitch_mb.png) center/cover fixed; }
    #write { width: 100%; padding: 56px 24px 60px; margin: 0; font-size: .95rem; background: rgba(255,255,255,.50); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: none; border-radius: 0; padding-top: 56px !important; }
    #write h1 { font-size: 1.35rem; }
    #write h2 { font-size: 1.15rem; }
    #write .highlight { padding: 12px 14px; font-size: .82rem; }
    #write img { max-height: 300px; max-width: 100%; margin: 0; }
    #write table { font-size: .8rem; }
    #write th, #write td { padding: 6px 8px; }
}
@media screen and (max-width:480px) {
    #write { width: 100%; padding: 50px 16px 50px; margin: 0; font-size: .9rem; background: rgba(255,255,255,.50); box-shadow: none; border-radius: 0; padding-top: 52px !important; }
    #write h1 { font-size: 1.2rem; padding-left: 10px; }
    #write h2 { font-size: 1.05rem; }
    #write .highlight { padding: 10px; font-size: .75rem; }
    #write img { max-height: 220px; }
    #write blockquote { padding: 8px 12px 8px 26px; }
    #write ol, #write ul { padding-left: 1.3rem; }
}