:root { --bg: #f5f7f4; --card: #fff; --primary: #176b55; --primary-d: #105642; --ink: #102a25; --text: #172a26; --muted: #66756f; --line: #dce5df; --soft: #edf3ee; --lime: #d7f36b; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.7 "Segoe UI", system-ui, sans-serif; }
a { color: var(--primary); }
.muted { color: var(--muted); }
.pad { padding: 12px 16px; }
#sort-mode { max-width:160px; min-height:36px; border:1px solid var(--line); border-radius:6px; padding:5px 8px; background:var(--card); color:var(--text); }
@media(max-width:760px) { #sort-mode { max-width:140px; font-size:12px; } }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px; background: var(--ink); color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.brand b { color: var(--lime); }
.brand-logo { display: block; width: 46px; height: 40px; flex: none; border-radius: 10px; object-fit: contain; background: #f3f1e9; }
.brand-logo.logo-dark { display: none; background: #1a2733; }
.theme-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #5c7a70; border-radius: 50%; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; }
:root[data-theme="dark"] { color-scheme: dark; --bg: #0e171c; --card: #16242b; --primary: #3ee08f; --primary-d: #66eaa7; --ink: #e8f1ec; --text: #e6efe9; --muted: #9bb0a6; --line: #2a3a41; --soft: #172830; }
[data-theme="dark"] .brand-logo.logo-light { display: none; }
[data-theme="dark"] .brand-logo.logo-dark { display: block; }
[data-theme="dark"] .topbar { background: #0a1115; border-bottom: 1px solid var(--line); }
[data-theme="dark"] .search { border-color: var(--line); background: #16242b; }
[data-theme="dark"] .sidebar .row.active { background: #1a3029; }
[data-theme="dark"] .doc pre { background: #0a1115; }
[data-theme="dark"] .doc blockquote { background: #12212a; color: #b6c7be; }
[data-theme="dark"] .callout.note { background: #12263a; }
[data-theme="dark"] .callout.tip { background: #123024; }
[data-theme="dark"] .callout.warning { background: #33270c; }
[data-theme="dark"] .callout.important { background: #381916; }
[data-theme="dark"] .lang-note { background: #33270c; color: #f0cf8a; }
:root:not([data-theme="dark"]) .topbar { background: #fafcf9; color: var(--ink); border-bottom: 1px solid var(--line); }
:root:not([data-theme="dark"]) .brand { color: var(--ink); }
:root:not([data-theme="dark"]) .brand b { color: var(--primary); }
:root:not([data-theme="dark"]) .search { border-color: #cbd7ce; background: #fff; color: var(--text); }
:root:not([data-theme="dark"]) .search::placeholder { color: var(--muted); }
:root:not([data-theme="dark"]) .top-actions a { color: #46564f; }
:root:not([data-theme="dark"]) .theme-toggle, :root:not([data-theme="dark"]) .lang-switch, :root:not([data-theme="dark"]) .menu-btn { border-color: #cbd7ce; }
:root:not([data-theme="dark"]) .lang-switch button, :root:not([data-theme="dark"]) .menu-btn { color: #46564f; }
:root:not([data-theme="dark"]) .lang-switch button.active { background: var(--primary); color: #fff; }
[data-theme="dark"] .doc mark, [data-theme="dark"] .lang-switch button.active { color: #102a25; }
.search { flex: 1; max-width: 420px; margin-left: auto; padding: 9px 14px; border: 1px solid #36574d; border-radius: 999px; background: #17372f; color: #fff; font: inherit; font-size: 14px; }
.search::placeholder { color: #9db5ac; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.top-actions a { color: #dce9e3; text-decoration: none; font-size: 14px; }
.lang-switch { display: inline-flex; border: 1px solid #5c7a70; border-radius: 999px; overflow: hidden; }
.lang-switch button { padding: 4px 11px; border: 0; background: transparent; color: #dce9e3; font: 600 12px inherit; cursor: pointer; }
.lang-switch button.active { background: var(--lime); color: var(--ink); }
.menu-btn { display: none; padding: 7px 12px; border: 1px solid #5c7a70; border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }

.shell { display: grid; grid-template-columns: 300px minmax(0, 1fr) 230px; max-width: 1480px; margin: 0 auto; }
.sidebar { position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px); overflow: auto; padding: 18px 10px 40px 16px; border-right: 1px solid var(--line); background: var(--card); }
.sidebar ul { margin: 0; padding: 0; list-style: none; }
.sidebar li > ul { margin-left: 14px; padding-left: 6px; border-left: 1px solid var(--line); display: none; }
.sidebar li.open > ul { display: block; }
.sidebar .row { display: flex; align-items: center; border-radius: 8px; }
.sidebar .row a { flex: 1; padding: 6px 8px; color: var(--text); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.sidebar .row:hover { background: var(--soft); }
.sidebar .row.active { background: #dff0e6; }
.sidebar .row.active a { color: var(--primary-d); font-weight: 700; }
.twisty, .twisty-gap { flex: none; width: 22px; height: 22px; }
.twisty { border: 0; background: transparent; cursor: pointer; position: relative; }
.twisty::before { content: ""; position: absolute; left: 7px; top: 6px; border: 4px solid transparent; border-left: 6px solid var(--muted); transition: transform .15s; }
li.open > .row .twisty::before { transform: rotate(90deg) translate(2px, 1px); }

.content { min-width: 0; padding: 26px 40px 80px; }
.crumbs { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs span { margin: 0 4px; }
.doc { max-width: 820px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 30px 40px 40px; }
.doc h1 { margin: 0 0 16px; font-size: 32px; line-height: 1.2; color: var(--ink); }
.doc h2 { margin: 36px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 23px; color: var(--ink); }
.doc h3 { margin: 26px 0 8px; font-size: 18px; color: var(--ink); }
.doc h4 { margin: 20px 0 6px; font-size: 16px; }
.doc .anchor { margin-left: 8px; color: var(--line); text-decoration: none; font-weight: 400; opacity: 0; }
.doc h2:hover .anchor, .doc h3:hover .anchor, .doc h1:hover .anchor { opacity: 1; color: var(--primary); }
.doc p, .doc li { overflow-wrap: anywhere; }
.doc code { padding: 2px 6px; border-radius: 5px; background: var(--soft); font: 0.9em Consolas, monospace; }
.doc pre { overflow: auto; padding: 14px 16px; border-radius: 10px; background: var(--ink); color: #e8f4ee; }
.doc pre code { padding: 0; background: none; color: inherit; }
.doc img { max-width: 100%; height: auto; border-radius: 8px; }
.doc figure { margin: 22px 0; text-align: center; }
.doc figure img { border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(18, 47, 38, .12); cursor: zoom-in; }
.doc figcaption { margin-top: 6px; color: var(--muted); font-size: 13px; }
.doc mark { background: var(--lime); padding: 0 3px; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.table-wrap { overflow-x: auto; margin: 16px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.doc th { background: var(--soft); }
.doc blockquote { margin: 18px 0; padding: 4px 16px; border-left: 4px solid var(--line); background: #fafcfa; color: #3a4b46; }
.callout { border-left-width: 4px; border-radius: 0 8px 8px 0; }
.callout-title { display: block; margin-top: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.callout.note { border-color: #2f7fd0; background: #eef5fc; }
.callout.tip { border-color: var(--primary); background: #ebf6ef; }
.callout.warning { border-color: #d98a00; background: #fff6e3; }
.callout.important { border-color: #c4392e; background: #fdeeed; }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 20px 0; border-radius: 10px; overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lang-note { padding: 8px 12px; border-radius: 8px; background: #fff6e3; color: #7a5200; font-size: 14px; }
.sub-list { padding-left: 20px; }
.pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 40px; }
.pn { display: block; flex: 1; max-width: 48%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 600; }
.pn small { display: block; color: var(--muted); font-weight: 400; }
.pn.next { text-align: right; margin-left: auto; }
.pn:hover { border-color: var(--primary); }
.btn { display: inline-block; padding: 9px 16px; border-radius: 9px; background: var(--primary); color: #fff; text-decoration: none; font-weight: 600; }

.toc { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow: auto; padding: 28px 16px; font-size: 13.5px; }
.toc strong { display: block; margin-bottom: 8px; color: var(--ink); }
.toc a { display: block; padding: 3px 0 3px 10px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a.l3 { padding-left: 22px; }
.toc a:hover { color: var(--primary); border-color: var(--primary); }

.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(8, 20, 16, .88); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

@media (max-width: 1180px) { .shell { grid-template-columns: 280px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 820px) {
    .menu-btn { display: inline-block; }
    .topbar { padding: 0 12px; gap: 8px; }
    .brand span:last-child { display: none; }
    .top-actions a { display: none; }
    .shell { display: block; }
    .sidebar { position: fixed; top: 64px; left: 0; z-index: 25; width: min(86vw, 330px); transform: translateX(-100%); transition: transform .2s; box-shadow: 10px 0 40px rgba(0, 0, 0, .2); }
    body.nav-open .sidebar { transform: none; }
    .content { padding: 16px 12px 60px; }
    .doc { padding: 20px 18px 28px; }
    .doc h1 { font-size: 26px; }
}
@media (max-width:560px) {
    .topbar { height:auto; min-height:64px; flex-wrap:wrap; padding:8px 10px; }
    .topbar .search { order:5; flex:1 1 100%; width:100%; }
    .topbar #sort-mode { margin-left:auto; }
    .topbar .top-actions { margin-left:0; }
    .sidebar { top:110px; max-height:calc(100vh - 110px); }
}