/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --sidebar-w: 270px;
    --header-h: 46px;

    /* fonts */
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

    /* sidebar – dark */
    --sb-bg: #1c1f26;
    --sb-border: #2a2d35;
    --sb-text: #9da5b4;
    --sb-hover: #252830;
    --sb-active-bg: #2c313a;
    --sb-active-fg: #61afef;
    --sb-folder: #e5c07b;
    --sb-search-bg: #22252c;

    /* header */
    --hd-bg: #21252b;

    /* content */
    --ct-bg: #ffffff;
    --ct-border: #e5e7eb;
    --ct-bread: #f8fafc;
}

/* ── Base ───────────────────────────────────────────────────── */
html,
body {
    height: 100%;
    font-family: var(--font-ui);
    overflow: hidden;
}

/* ── App shell ──────────────────────────────────────────────── */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* ── Header ─────────────────────────────────────────────────── */
#header {
    height: var(--header-h);
    background: var(--hd-bg);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
    border-bottom: 1px solid #181a1f;
    flex-shrink: 0;
    z-index: 20;
}

#app-title {
    color: #61afef;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

#read-only-badge {
    background: rgba(97, 175, 239, .12);
    color: #9dd2ff;
    border: 1px solid rgba(97, 175, 239, .28);
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

#dirty-indicator {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .18);
}

#app.has-unsaved #dirty-indicator {
    display: inline-block;
}

.btn {
    background: #2c313a;
    color: #abb2bf;
    border: 1px solid #3e4451;
    padding: 5px 11px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.btn:hover {
    background: #3e4451;
    color: #e5c07b;
}

.btn-primary {
    background: #264f78;
    color: #9cdcfe;
    border-color: #1a3e66;
}

.btn-primary:hover {
    background: #1e3a5f;
    color: #61afef;
}

.btn-help {
    margin-left: auto;
}

.btn-help.help-active {
    background: #2d4a30;
    color: #98d4a3;
    border-color: #3d6b42;
}

.btn-help.help-active:hover {
    background: #3a5e3d;
    color: #b8e6be;
}

.btn.edit-active {
    background: #3c2b4f;
    color: #dfc4ff;
    border-color: #594071;
}

.btn.edit-active:hover {
    background: #4e3a66;
    color: #f0ddff;
}

.btn.btn-save-dirty {
    background: #2b5d43;
    color: #d9ffe8;
    border-color: #3b845f;
}

.btn.btn-save-dirty:hover {
    background: #347251;
    color: #f3fff8;
}

#app.share-readonly .btn:disabled,
#app.share-readonly .btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

#app.share-readonly .btn:hover:disabled {
    background: inherit;
    color: inherit;
}

#app.share-readonly #editor-panel {
    opacity: .9;
}

#app.share-readonly #md-editor {
    cursor: not-allowed;
}

/* ── Body row ───────────────────────────────────────────────── */
#body {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-w);
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sb-border);
    flex-shrink: 0;
    user-select: none;
}

#sb-top {
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#explorer-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #4b5263;
    padding: 0 4px;
}

#search-wrap {
    position: relative;
}

#search-wrap svg {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #4b5263;
    pointer-events: none;
}

#search {
    width: 100%;
    background: var(--sb-search-bg);
    border: 1px solid #3e4451;
    color: var(--sb-text);
    padding: 5px 8px 5px 28px;
    border-radius: 5px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

#search::placeholder {
    color: #4b5263;
}

#search:focus {
    border-color: #61afef;
    box-shadow: 0 0 0 2px rgba(97, 175, 239, .15);
}

#file-tree {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
}

#file-tree::-webkit-scrollbar {
    width: 4px;
}

#file-tree::-webkit-scrollbar-thumb {
    background: #3e4451;
    border-radius: 2px;
}

/* ── Tree items ─────────────────────────────────────────────── */
.ti {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    cursor: pointer;
    color: var(--sb-text);
    font-size: 12.5px;
    border-radius: 4px;
    margin: 1px 4px;
    min-width: 0;
}

.ti:hover {
    background: var(--sb-hover);
}

.ti.active {
    background: var(--sb-active-bg);
    color: var(--sb-active-fg);
}

.ti.hidden {
    display: none;
}

.ti .ti-arrow {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #4b5263;
    transition: transform .15s;
}

.ti .ti-arrow.open {
    transform: rotate(90deg);
}

.ti .ti-icon {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
}

.ti .ti-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ti.folder .ti-name {
    color: var(--sb-folder);
}

.tc.collapsed {
    display: none;
}

.tree-empty {
    color: #4b5263;
    font-size: 12px;
    text-align: center;
    padding: 24px 16px;
    line-height: 1.7;
}

.tree-empty strong {
    color: #61afef;
}

/* ── Resizer ────────────────────────────────────────────────── */
#resizer {
    width: 3px;
    background: var(--sb-border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background .15s;
}

#resizer:hover,
#resizer.active {
    background: #61afef;
}

/* ── Content pane ───────────────────────────────────────────── */
#content {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--ct-bg);
}

#editor-layout {
    flex: 1;
    min-height: 0;
    display: flex;
}

#preview-panel {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#editor-panel {
    display: none;
    width: min(46vw, 680px);
    min-width: 300px;
    border-right: 1px solid var(--ct-border);
    background: #0f1319;
    flex-direction: column;
}

#app.edit-mode #editor-panel {
    display: flex;
}

#editor-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px;
    border-bottom: 1px solid #273142;
    background: #171e28;
}

.md-tool {
    border: 1px solid #324157;
    background: #1c2633;
    color: #d8e2f0;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.md-tool:hover {
    background: #243245;
    border-color: #4f6b90;
    color: #ffffff;
}

.md-tool.is-active {
    background: #2f4f72;
    border-color: #7fb1e3;
    color: #ffffff;
}

.md-tool-action {
    background: #203447;
    border-color: #385877;
}

.md-tool-divider {
    width: 1px;
    height: 24px;
    background: #324157;
    margin: 0 2px;
    align-self: center;
}

#editor-status {
    margin-left: auto;
    align-self: center;
    min-height: 16px;
    font-size: 11px;
    color: #9cc6ff;
    white-space: nowrap;
}

#editor-status.is-error {
    color: #ffb3b3;
}

#app-status {
    position: fixed;
    z-index: 1000;
    top: 54px;
    left: 50%;
    max-width: min(440px, calc(100vw - 24px));
    padding: 9px 12px;
    border: 1px solid #385877;
    border-radius: 6px;
    background: #162231;
    color: #d9eaff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 140ms ease, transform 140ms ease;
}

#app-status.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

#app-status.is-error {
    border-color: #8d454c;
    background: #351c22;
    color: #ffd8dc;
}

#md-editor {
    flex: 1;
    min-height: 0;
    resize: none;
    width: 100%;
    border: 0;
    outline: 0;
    background: #0f1319;
    color: #e5edf7;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.65;
    padding: 16px;
    tab-size: 4;
}

#breadcrumb {
    display: none;
    height: 32px;
    padding: 0 20px;
    align-items: center;
    gap: 5px;
    background: var(--ct-bread);
    border-bottom: 1px solid var(--ct-border);
    font-size: 11.5px;
    color: #9ca3af;
    flex-shrink: 0;
    overflow: hidden;
}

#breadcrumb .sep {
    color: #d1d5db;
    margin: 0 1px;
}

#breadcrumb .last {
    color: #374151;
    font-weight: 600;
}

#md-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#md-scroll::-webkit-scrollbar {
    width: 8px;
}

#md-scroll::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 4px;
}

#md-scroll::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* ── Welcome screen ─────────────────────────────────────────── */
#welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 40px;
    color: #9ca3af;
    text-align: center;
    gap: 0;
}

#welcome .w-icon {
    font-size: 60px;
    margin-bottom: 18px;
}

#welcome>h1 {
    font-size: 22px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

/* ── SEO info section (inside welcome) ─────────────────────── */
#welcome .seo-info {
    margin-top: 40px;
    border-top: 1px solid #e5e7eb;
    padding-top: 24px;
    max-width: 600px;
    width: 100%;
    text-align: left;
}

#welcome .seo-info h2 {
    font-size: 14.5px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px;
}

#welcome .seo-info h3 {
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 20px 0 6px;
}

#welcome .seo-info p {
    font-size: 12.5px;
    line-height: 1.65;
    color: #6b7280;
    max-width: 100%;
    margin: 0;
}

#welcome .seo-info ul {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.75;
    padding-left: 18px;
    margin: 0;
}

#welcome .seo-info .faq {
    margin: 0;
}

#welcome .seo-info .faq dt {
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-top: 12px;
}

#welcome .seo-info .faq dd {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.65;
    margin-left: 0;
}

#welcome .seo-info code {
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: #f3f4f6;
    padding: 1px 4px;
    border-radius: 3px;
    color: #374151;
}

#welcome p {
    font-size: 13.5px;
    line-height: 1.65;
    max-width: 340px;
    color: #6b7280;
}

#welcome .free-callout {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(100%, 520px);
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid #f59e0b;
    background: linear-gradient(135deg, #fff7d6 0%, #fde68a 100%);
    box-shadow: 0 18px 44px rgba(245, 158, 11, .18);
}

#welcome .free-callout strong {
    font-size: 20px;
    line-height: 1.2;
    color: #7c2d12;
    letter-spacing: .01em;
}

#welcome .free-callout span {
    font-size: 13px;
    line-height: 1.6;
    color: #92400e;
    max-width: 420px;
}

#welcome .hint {
    margin-top: 18px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    color: #6b7280;
}

/* ── Markdown body ──────────────────────────────────────────── */
#md-body {
    display: none;
    padding: 40px 52px 60px;
}

.md-content {
    max-width: 840px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.78;
    color: #1f2937;
}

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
    margin-top: 1.8em;
    margin-bottom: .55em;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}

.md-content>h1:first-child,
.md-content>h2:first-child {
    margin-top: 0;
}

.md-content h1 {
    font-size: 2.1em;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: .35em;
}

.md-content h2 {
    font-size: 1.55em;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: .25em;
}

.md-content h3 {
    font-size: 1.25em;
}

.md-content h4 {
    font-size: 1.05em;
}

.md-content p {
    margin-bottom: 1em;
}

.md-content strong {
    font-weight: 700;
    color: #111827;
}

.md-content em {
    font-style: italic;
}

.md-content del {
    text-decoration: line-through;
    color: #9ca3af;
}

.md-content a {
    color: #2563eb;
    text-decoration: none;
}

.md-content a:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.md-content code {
    background: #f1f5f9;
    color: #be185d;
    padding: .15em .4em;
    border-radius: 4px;
    font-size: .875em;
    font-family: var(--font-mono);
    border: 1px solid #e2e8f0;
}

.md-content pre {
    background: #282c34;
    border-radius: 8px;
    padding: 18px 20px;
    overflow-x: auto;
    margin-bottom: 1.3em;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.md-content pre code {
    background: none;
    color: #abb2bf;
    padding: 0;
    font-size: 13.5px;
    border-radius: 0;
    border: none;
    font-family: var(--font-mono);
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #3e4451;
    color: #abb2bf;
    border: none;
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font-ui);
    opacity: 0;
    transition: opacity .15s, background .12s;
}

pre:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: #4b5263;
}

.copy-btn.copied {
    background: #2d6a3f;
    color: #a9d5b5;
}

.md-content blockquote {
    border-left: 4px solid #60a5fa;
    background: #eff6ff;
    margin: 0 0 1.2em;
    padding: 12px 16px 12px 18px;
    border-radius: 0 6px 6px 0;
    color: #374151;
}

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

.md-content ul,
.md-content ol {
    padding-left: 1.8em;
    margin-bottom: 1em;
}

.md-content li {
    margin-bottom: .3em;
}

.md-content li>p {
    margin-bottom: .3em;
}

.md-content .task-list-item {
    list-style: none;
    margin-left: -1.2em;
}

.md-content .task-list-item input {
    margin-right: 7px;
    cursor: default;
}

.md-content table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.3em;
    font-size: 14px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #e5e7eb;
}

.md-content th {
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
    text-align: left;
}

.md-content th,
.md-content td {
    padding: 9px 14px;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

.md-content th:last-child,
.md-content td:last-child {
    border-right: none;
}

.md-content tr:last-child td {
    border-bottom: none;
}

.md-content tbody tr:hover td {
    background: #f9fafb;
}

.md-content img {
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

.md-content hr {
    border: none;
    border-top: 2px solid #f0f0f0;
    margin: 2.5em 0;
}

/* ── Outline (right panel) ─────────────────────────────────── */
#outline {
    width: 220px;
    background: var(--sb-bg);
    border-left: 1px solid var(--sb-border);
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    user-select: none;
    overflow: hidden;
}

#outline.visible {
    display: flex;
}

.outline-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #4b5263;
    padding: 14px 12px 8px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}

#outline-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
}

#outline-list::-webkit-scrollbar {
    width: 4px;
}

#outline-list::-webkit-scrollbar-thumb {
    background: #3e4451;
    border-radius: 2px;
}

.oi {
    display: block;
    width: calc(100% - 8px);
    padding: 3px 12px;
    appearance: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    color: var(--sb-text);
    cursor: pointer;
    border-radius: 3px;
    margin: 1px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
    transition: color .1s, background .1s;
    border-left: 2px solid transparent;
}

.oi:hover {
    background: var(--sb-hover);
    color: #c8cdd6;
}

.oi.oi-active {
    color: var(--sb-active-fg);
    border-left-color: var(--sb-active-fg);
    background: var(--sb-active-bg);
}

.oi[data-level="1"] {
    padding-left: 12px;
    font-weight: 600;
    font-size: 12.5px;
}

.oi[data-level="2"] {
    padding-left: 12px;
}

.oi[data-level="3"] {
    padding-left: 22px;
    font-size: 11.5px;
}

.oi[data-level="4"] {
    padding-left: 32px;
    font-size: 11px;
    color: #6b7280;
}

.oi[data-level="5"] {
    padding-left: 42px;
    font-size: 10.5px;
    color: #6b7280;
}

.oi[data-level="6"] {
    padding-left: 52px;
    font-size: 10px;
    color: #6b7280;
}

/* ── Drop overlay ───────────────────────────────────────────── */
#drop-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(97, 175, 239, .12);
    border: 3px dashed #61afef;
    z-index: 100;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #61afef;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

#drop-overlay.visible {
    display: flex;
}

/* ── Footer ─────────────────────────────────────────────────── */
#footer {
    flex-shrink: 0;
    height: 32px;
    background: var(--hd-bg);
    border-top: 1px solid #181a1f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: 11.5px;
    color: #4b5263;
    z-index: 20;
}

#footer a {
    color: #61afef;
    text-decoration: none;
    transition: color .12s;
}

#footer a:hover {
    color: #e5c07b;
}

#footer .sep {
    color: #2a2d35;
}

#footer .bmc-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f7c948;
}

#footer .bmc-link:hover {
    color: #ffe07a;
}

/* ── Light theme ───────────────────────────────────────────── */
html[data-theme="light"] {
    --sb-bg: #f3f3f3;
    --sb-border: #e0e0e0;
    --sb-text: #4f5666;
    --sb-hover: #e6e6e6;
    --sb-active-bg: #d7e9fa;
    --sb-active-fg: #005fbf;
    --sb-folder: #886700;
    --sb-search-bg: #ffffff;
    --hd-bg: #f0f0f0;
    --ct-bg: #ffffff;
    --ct-border: #e0e0e0;
    --ct-bread: #fafafa;
}

html[data-theme="light"] #header {
    border-bottom-color: #d6d6d6;
}

html[data-theme="light"] #app-title {
    color: #005fbf;
}

html[data-theme="light"] #dirty-indicator {
    background: #b45309;
    box-shadow: 0 0 0 2px rgba(180, 83, 9, .16);
}

html[data-theme="light"] #app-title svg {
    stroke: #005fbf;
}

html[data-theme="light"] .btn {
    background: #ffffff;
    color: #3e4044;
    border-color: #d0d0d0;
}

html[data-theme="light"] .btn:hover {
    background: #e6e6e6;
    color: #886700;
}

html[data-theme="light"] .btn-primary {
    background: #005fbf;
    color: #e8f2ff;
    border-color: #004ea0;
}

html[data-theme="light"] .btn-primary:hover {
    background: #004ea0;
    color: #cce4ff;
}

html[data-theme="light"] .btn-help.help-active {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

html[data-theme="light"] .btn-help.help-active:hover {
    background: #bbf7d0;
    color: #14532d;
}

html[data-theme="light"] .btn.edit-active {
    background: #f3e8ff;
    color: #6b21a8;
    border-color: #d8b4fe;
}

html[data-theme="light"] .btn.edit-active:hover {
    background: #e9d5ff;
    color: #581c87;
}

html[data-theme="light"] .btn.btn-save-dirty {
    background: #d5f2e1;
    color: #174930;
    border-color: #98c8ae;
}

html[data-theme="light"] .btn.btn-save-dirty:hover {
    background: #c1e9d2;
    color: #103b26;
}

html[data-theme="light"] #explorer-label,
html[data-theme="light"] .outline-label {
    color: #999;
}

html[data-theme="light"] #search-wrap svg {
    color: #aaa;
}

html[data-theme="light"] #search {
    border-color: #d0d0d0;
    color: #333;
}

html[data-theme="light"] #search::placeholder {
    color: #bbb;
}

html[data-theme="light"] #search:focus {
    border-color: #005fbf;
    box-shadow: 0 0 0 2px rgba(0, 95, 191, .12);
}

html[data-theme="light"] #file-tree::-webkit-scrollbar-thumb,
html[data-theme="light"] #outline-list::-webkit-scrollbar-thumb {
    background: #c8c8c8;
}

html[data-theme="light"] .ti .ti-arrow {
    color: #bbb;
}

html[data-theme="light"] .tree-empty {
    color: #aaa;
}

html[data-theme="light"] .tree-empty strong {
    color: #005fbf;
}

html[data-theme="light"] #resizer {
    background: #e0e0e0;
}

html[data-theme="light"] #resizer:hover,
html[data-theme="light"] #resizer.active {
    background: #005fbf;
}

html[data-theme="light"] #breadcrumb {
    color: #999;
}

html[data-theme="light"] #breadcrumb .sep {
    color: #ccc;
}

html[data-theme="light"] #breadcrumb .last {
    color: #222;
}

html[data-theme="light"] #md-scroll::-webkit-scrollbar-thumb {
    background: #d4d4d4;
}

html[data-theme="light"] #md-scroll::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

html[data-theme="light"] #welcome {
    color: #999;
}

html[data-theme="light"] #welcome>h1 {
    color: #333;
}

html[data-theme="light"] #welcome .seo-info {
    border-top-color: #e5e7eb;
}

html[data-theme="light"] #welcome .seo-info h2,
html[data-theme="light"] #welcome .seo-info .faq dt {
    color: #222;
}

html[data-theme="light"] #welcome .seo-info h3,
html[data-theme="light"] #welcome .seo-info p,
html[data-theme="light"] #welcome .seo-info ul,
html[data-theme="light"] #welcome .seo-info .faq dd {
    color: #555;
}

html[data-theme="light"] #welcome p {
    color: #666;
}

html[data-theme="light"] #welcome .free-callout {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fff7d6 0%, #fde68a 100%);
    box-shadow: 0 18px 44px rgba(245, 158, 11, .18);
}

html[data-theme="light"] #welcome .free-callout strong {
    color: #7c2d12;
}

html[data-theme="light"] #welcome .free-callout span {
    color: #92400e;
}

html[data-theme="light"] #welcome .hint {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #666;
}

html[data-theme="light"] #editor-panel {
    background: #f7fafc;
    border-right-color: #e0e0e0;
}

html[data-theme="light"] #editor-toolbar {
    background: #eef3f8;
    border-bottom-color: #d6dde7;
}

html[data-theme="light"] .md-tool {
    background: #ffffff;
    color: #314155;
    border-color: #c9d5e5;
}

html[data-theme="light"] .md-tool:hover {
    background: #ecf3fb;
    color: #1b2a3c;
    border-color: #8fb0d6;
}

html[data-theme="light"] .md-tool.is-active {
    background: #dcecff;
    border-color: #6f99c8;
    color: #123457;
}

html[data-theme="light"] .md-tool-action {
    background: #edf4fb;
    border-color: #b8cbdf;
}

html[data-theme="light"] .md-tool-divider {
    background: #cbd7e5;
}

html[data-theme="light"] #editor-status {
    color: #1d4e89;
}

html[data-theme="light"] #editor-status.is-error {
    color: #b42318;
}

html[data-theme="light"] #md-editor {
    background: #f7fafc;
    color: #1f2937;
}

html[data-theme="light"] .oi:hover {
    background: #e6e6e6;
    color: #333;
}

html[data-theme="light"] .oi[data-level="4"],
html[data-theme="light"] .oi[data-level="5"],
html[data-theme="light"] .oi[data-level="6"] {
    color: #888;
}

html[data-theme="light"] #footer {
    border-top-color: #d6d6d6;
    color: #888;
}

html[data-theme="light"] #footer .sep {
    color: #ddd;
}

html[data-theme="light"] #footer a {
    color: #005fbf;
}

html[data-theme="light"] #footer a:hover {
    color: #886700;
}

html[data-theme="light"] #footer .bmc-link {
    color: #b08000;
}

html[data-theme="light"] #footer .bmc-link:hover {
    color: #886700;
}

/* ── Hamburger / menu button (desktop: hidden) ──────────────── */
#btn-menu,
#btn-outline {
    display: none;
    flex-shrink: 0;
    padding: 5px 8px;
}

/* ── Sidebar overlay (mobile backdrop) ──────────────────────── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(0, 0, 0, 0.45);
    z-index: 15;
}

#sidebar-overlay.visible {
    display: block;
}

/* ── Mobile breakpoint ───────────────────────────────────────── */
@media (max-width: 768px) {

    #header {
        padding-inline: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #header::-webkit-scrollbar {
        display: none;
    }

    #app-title,
    #header .btn {
        flex-shrink: 0;
    }

    #app-title {
        margin-right: 0;
    }

    .app-title-label {
        display: none;
    }

    #header .btn {
        padding-inline: 8px;
    }

    .btn-help {
        margin-left: 0;
    }

    #editor-layout {
        flex-direction: column;
    }

    #app.edit-mode #editor-panel {
        width: 100%;
        min-width: 0;
        height: 44vh;
        border-right: none;
        border-bottom: 1px solid var(--ct-border);
    }

    #editor-status {
        width: 100%;
        margin-left: 0;
    }

    #btn-menu,
    #btn-outline:not([hidden]) {
        display: flex;
    }

    .btn-label {
        display: none;
    }

    #sidebar {
        position: fixed;
        top: var(--header-h);
        bottom: 0;
        left: 0;
        z-index: 16;
        width: min(280px, 85vw) !important;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    #sidebar.mobile-open {
        transform: translateX(0);
    }

    #resizer {
        display: none;
    }

    #outline {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        z-index: 16;
        width: min(280px, 85vw);
        display: flex !important;
        transform: translateX(100%);
        transition: transform .25s ease;
    }

    #outline.mobile-open {
        transform: translateX(0);
    }

    #md-body {
        padding: 20px 16px 40px;
    }

    .md-content {
        font-size: 15px;
    }

    .md-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ti {
        min-height: 40px;
    }

    #welcome {
        padding: 24px 20px;
    }

    #welcome .free-callout {
        padding: 14px 16px;
    }

    #welcome .free-callout strong {
        font-size: 18px;
    }

    #footer {
        height: auto;
        min-height: 32px;
        padding: 6px 12px;
        gap: 12px;
        flex-wrap: wrap;
    }
}