:root {
    --rail-border:#e9ecef;
    --stick-top:72px;
    --pad-x:1.25rem;
}

html, body { overflow-x: hidden; }
main.container-fluid.px-0 .row { margin-left:0; margin-right:0; }

.page-rail { padding:0 var(--pad-x); }
.related { padding:0 var(--pad-x); }

.post-surface {
    border-left:1px solid var(--rail-border);
    border-right:1px solid var(--rail-border);
    padding:0 var(--pad-x);
    background:#fff;
}

.post-titlebar {
    position:static;
    top:auto;
    background:transparent;
    z-index:auto;
    padding:.25rem 0 .75rem 0;
    border-bottom:1px solid var(--rail-border);
    margin-bottom:1rem;
}
.post-titlebar h1 { margin:0 0 .25rem 0; line-height:1.2; }
.post-meta small { color:#6c757d; }

.lesson-surface {
    margin-left:.75rem;
    padding:.25rem .75rem .25rem .5rem;
    border-right:0;
    background:#fff;
}
#lesson-nav a.toc-link {
    display:block; color:#333; text-decoration:none;
    padding:4px 0;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    border-left:2px solid transparent;
    transition:all .2s;
}
#lesson-nav a.toc-link:hover { color:#0d6efd; }
#lesson-nav a.toc-link.is-active {
    color:#0d6efd; font-weight:600;
    border-left:2px solid #0d6efd; padding-left:6px;
}
#lesson-nav .section-title {
    display:flex; align-items:center; justify-content:space-between;
    font-weight:600; color:#6c757d;
    margin:.25rem 0; padding:.25rem .25rem;
}
#lesson-nav .section-title button {
    border:0; background:transparent; padding:0;
    color:inherit; line-height:1; cursor:pointer;
}
#lesson-nav .section-body { padding-left:.25rem; }

.sidebar-right {
    margin-right:.75rem;
    padding-right:.75rem;
    border-left:0;
}
.sidebar-right .card {
    border:0; box-shadow:none;
    padding:.5rem 0 1rem;
    margin:0;
    border-bottom:1px solid var(--rail-border);
}
.sidebar-right .card:last-child { border-bottom:0; }
.sidebar-right .card-header {
    background:transparent;
    padding:0 0 .5rem; border:0;
}
.sidebar-right .card-body { padding:0; }

.toc {
    position:sticky;
    top:calc(var(--stick-top) + 56px);
    max-height:calc(100vh - var(--stick-top) - 90px);
    overflow:auto;
}
#toc { font-size:.9rem; line-height:1.5; }
#toc a.toc-link {
    display:block; color:#333; text-decoration:none;
    padding:4px 0; border-left:2px solid transparent;
    transition:all .2s;
}
#toc a.toc-link:hover { color:#0d6efd; }
#toc a.toc-link.is-active {
    color:#0d6efd; font-weight:600;
    border-left:2px solid #0d6efd; padding-left:6px;
}
#toc a.toc-h2 { margin-left:0; font-weight:500; }
#toc a.toc-h3 { margin-left:1rem; font-size:.85rem; }

.article-content pre {
    background:#fff !important;
    color:#212529 !important;
    padding:1rem;
    border-radius:.5rem;
    overflow:auto;
    border:1px solid #e9ecef;
}
.article-content code {
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.code-copy-btn {
    position:absolute; top:.5rem; right:.5rem; font-size:.8rem;
    padding:.25rem .5rem; border-radius:.375rem;
    border:1px solid #dee2e6; background:#f8f9fa;
    color:#212529; cursor:pointer; transition:background .2s,color .2s;
}
.code-copy-btn:hover { background:#e9ecef; color:#000; }
.hljs { background:#fff !important; color:#212529 !important; border:none !important; box-shadow:none !important; }

.related .row { --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }
.related .card {
    border:1px solid #eee; box-shadow:none;
    border-radius:.5rem; height:100%;
    transition:transform .15s ease;
}
.related .card:hover { transform:translateY(-2px); }
.related .card img {
    height:140px; object-fit:cover;
    border-radius:.5rem .5rem 0 0;
}
.related .card-title a {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.related .card-body { padding:.5rem .6rem; }
.related h4 { margin-left:.125rem; margin-bottom:.5rem; }
.related small { font-size:.78rem; color:#6c757d; }

.article-content img { max-width:100%; height:auto; border-radius:.5rem; }
.tag {
    display:inline-block;
    margin:0 .25rem .25rem 0; padding:.25rem .5rem;
    border:1px solid #e5e7eb; border-radius:999px;
    font-size:.85rem;
}
#cats-right .tag, #tags-right .tag {
    margin:0 .35rem .35rem 0;
    display:inline-flex; align-items:center; gap:.25rem;
    white-space:nowrap;
}
#cats-right .tag i, #tags-right .tag i { opacity:.9; }
#post-views { border-top:1px solid #e9ecef; padding-top:.75rem; }

@media (max-width:991.98px) {
    .post-surface { border:0; padding:0; }
    #lesson-nav, .sidebar-right, .toc {
        position:static; top:auto;
        max-height:none; overflow:visible;
    }
    .lesson-surface, .sidebar-right { margin:0; padding:0; border:0; }
    .page-rail, .related { padding:0 var(--pad-x); }
}

#lesson-tree .tree-group { margin-bottom:.25rem; }
#lesson-tree .tree-head,
#lesson-tree .tree-sub-head {
    cursor:pointer; display:flex; align-items:center; gap:.35rem;
    padding:.25rem .25rem; font-weight:600;
    color:#495057; user-select:none;
}
#lesson-tree .tree-sub-head .title {
    cursor:pointer; display:flex; align-items:center; gap:.35rem;
    padding:.25rem .25rem; font-weight:600;
    color:#495057; user-select:none;
}
#lesson-tree .tree-body { padding-left:.25rem; }
#lesson-tree .tree-sub { margin:.15rem 0; }
#lesson-tree .tree-sub-body { padding:.15rem 0 .15rem 1rem; }
#lesson-tree .caret { transition:transform .18s ease; }
#lesson-tree .caret.rot-90 { transform:rotate(-90deg); }
#lesson-tree a.tree-link {
    display:block; padding:.25rem 0; color:#333; text-decoration:none;
    border-left:2px solid transparent;
    white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
#lesson-tree a.tree-link:hover { color:#0d6efd; }
#lesson-tree a.tree-link.active {
    color:#0d6efd; font-weight:600;
    border-left-color:#0d6efd; padding-left:.375rem;
}

.title {
    max-width:none !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    text-overflow:unset !important;
}