.kira-count {
    display: none !important;
}

.kira-avatar {
    display: none !important;
}

.kira-header>a img {
    display: none !important;
}

.kira-header>a::after {
    content: attr(title);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.kira-header {
    background: rgba(10, 13, 18, 0.88) !important;
    border-bottom: 1px solid rgba(217, 117, 25, 0.25);
}

.kira-docs-tree {
    display: grid;
    gap: 8px;
}

.kira-search-panel {
    margin: 8px 0 10px;
}

.kira-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(12, 16, 22, 0.45);
    border: 1px solid rgba(217, 117, 25, 0.35);
}

.kira-search-input-wrap i {
    color: #d97519;
    font-size: 14px;
}

.kira-search-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #e8edf2;
    font-size: 0.9rem;
}

.kira-search-input-wrap input::placeholder {
    color: #9ca8b8;
}

.kira-search-results {
    margin-top: 8px;
    display: grid;
    gap: 6px;
    max-height: 42vh;
    overflow: auto;
    padding-right: 2px;
}

.kira-search-item {
    display: block;
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(12, 16, 22, 0.45);
    text-decoration: none;
}

.kira-search-item:hover {
    background: rgba(187, 101, 22, 0.24);
}

.kira-search-item-title {
    color: #e8edf2;
    font-size: 0.9rem;
    line-height: 1.35;
}

.kira-search-item-snippet {
    margin-top: 3px;
    color: #bac6d8;
    font-size: 0.8rem;
    line-height: 1.4;
}

.kira-search-state {
    border-radius: 8px;
    padding: 10px;
    color: #bac6d8;
    background: rgba(12, 16, 22, 0.45);
    font-size: 0.86rem;
}

.kira-tree-group {
    background: rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    overflow: hidden;
}

.kira-tree-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    user-select: none;
}

.kira-tree-summary::-webkit-details-marker {
    display: none;
}

.kira-tree-summary::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.24s ease;
}

.kira-tree-group[open] .kira-tree-summary::after {
    transform: rotate(225deg);
}

.kira-tree-children {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
    opacity: 1;
}

.kira-tree-group:not([open]) .kira-tree-children {
    grid-template-rows: 0fr;
    opacity: 0;
}

.kira-tree-children-inner {
    overflow: hidden;
    padding: 0 8px 8px;
}

.kira-docs-tree .kira-list-item {
    margin: 2px 0;
    border-radius: 8px;
    overflow: hidden;
}

.kira-docs-tree .kira-list-item .kira-list-item-content {
    font-size: 0.92rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kira-background {
    opacity: 0.75 !important;
}

.kira-content {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(5px);
}

.kira-content .kira-main-content {
    background-color: transparent !important;
}

.kira-content .kira-main-content .kira-post-copyright,
.kira-content .kira-main-content .kira-post-nav,
.kira-content .kira-main-content .kira-post-footer,
.kira-content .kira-main-content .kira-page-nav {
    background-color: rgba(255, 255, 255, 0.46) !important;
}

.kira-image,
.kira-image .kira-image-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

.kira-image {
    z-index: 9999 !important;
}

.kira-image .kira-image-modal.visible {
    background-color: rgba(8, 10, 14, 0.78) !important;
    backdrop-filter: blur(6px) !important;
}

.kira-content {
    background-color: rgba(22, 26, 32, 0.72) !important;
}

.kira-content .kira-main-content,
.kira-content .kira-main-content article,
.kira-content .kira-main-content p,
.kira-content .kira-main-content li,
.kira-content .kira-main-content blockquote,
.kira-content .kira-main-content h1,
.kira-content .kira-main-content h2,
.kira-content .kira-main-content h3,
.kira-content .kira-main-content h4,
.kira-content .kira-main-content h5,
.kira-content .kira-main-content h6 {
    color: #e8edf2 !important;
}

.kira-tree-group,
.kira-content .kira-main-content .kira-post-copyright,
.kira-content .kira-main-content .kira-post-nav,
.kira-content .kira-main-content .kira-post-footer,
.kira-content .kira-main-content .kira-page-nav {
    background-color: rgba(32, 38, 46, 0.78) !important;
    color: #e8edf2 !important;
}

.kira-content .kira-main-content .kira-post-meta.kira-rainbow a:nth-child(3n+1) {
    background-color: rgba(28, 44, 72, 0.82) !important;
    color: #d8e7ff !important;
}

.kira-content .kira-main-content .kira-post-meta.kira-rainbow a:nth-child(3n+2) {
    background-color: rgba(58, 33, 66, 0.82) !important;
    color: #ecd7ff !important;
}

.kira-content .kira-main-content .kira-post-meta.kira-rainbow a:nth-child(3n+3) {
    background-color: rgba(86, 44, 20, 0.85) !important;
    color: #ffe2c4 !important;
}

.kira-list-item,
.kira-list-item i,
.kira-tree-summary,
.kira-copyright,
.kira-copyright a {
    color: #e8edf2 !important;
}

@media (max-width: 1000px) {
    .kira-body .kira-sidebar {
        background-color: rgba(22, 26, 32, 0.96) !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: 88vw !important;
        max-width: 88vw !important;
    }

    .kira-body .kira-sidebar.show {
        width: 88vw !important;
    }

    .kira-tree-group {
        background-color: rgba(32, 38, 46, 0.92) !important;
    }
}

.kira-list-item.true {
    background: #bb6516 !important;
    box-shadow: 0 2px 14px rgba(187, 101, 22, 0.55) !important;
}

.kira-content .kira-main-content a,
.kira-post-copyright a,
.kira-copyright a,
.kira-tree-summary::after {
    color: #d97519 !important;
    border-color: #d97519 !important;
}

.kira-content .kira-main-content code {
    background-color: rgba(187, 101, 22, 0.22) !important;
    border: 1px solid rgba(217, 117, 25, 0.42) !important;
    color: #ffd8b2 !important;
}

.kira-content .kira-main-content pre code,
.kira-content .kira-main-content .highlight code,
.kira-content .kira-main-content .highlight .code pre {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
}

.kira-content .kira-main-content blockquote {
    background: rgba(20, 26, 34, 0.82) !important;
    border: 1px solid rgba(217, 117, 25, 0.42) !important;
    border-left: 4px solid #bb6516 !important;
    color: #dbe5f2 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.kira-content .kira-main-content blockquote::before,
.kira-content .kira-main-content blockquote::after {
    color: rgba(255, 216, 178, 0.72) !important;
}

.kira-content .kira-main-content blockquote a,
.kira-content .kira-main-content blockquote code {
    color: #ffd8b2 !important;
}

/* Busuanzi panel above acknowledgements */
.kira-widget-busuanzi {
    margin: 14px 20px 10px !important;
    background-color: rgba(32, 38, 46, 0.78) !important;
    border: 1px solid rgba(217, 117, 25, 0.35);
}

.kira-busuanzi-stats {
    padding: 8px 14px 16px;
    display: grid;
    gap: 8px;
}

.kira-busuanzi-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(12, 16, 22, 0.45);
    color: #e8edf2;
}

.kira-busuanzi-label {
    color: #bac6d8;
    font-size: 12px;
}

.kira-busuanzi-value {
    color: #ffd8b2;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Show a visible scrollbar for article/content area */
.kira-content {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(217, 117, 25, 0.85) rgba(11, 14, 20, 0.5) !important;
}

.kira-content::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
}

.kira-content::-webkit-scrollbar-track {
    background: rgba(11, 14, 20, 0.45);
    border-radius: 8px;
}

.kira-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(217, 117, 25, 0.95), rgba(153, 82, 19, 0.95));
    border-radius: 8px;
    border: 1px solid rgba(255, 193, 127, 0.35);
}

/* Desktop: sidebar + content should fill the full available width. */
@media (min-width: 1001px) {

    html,
    body {
        height: 100vh !important;
        overflow: hidden !important;
    }

    .kira-body {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
        box-sizing: border-box;
        padding: 8px 16px;
        gap: 14px;
    }

    .kira-sidebar {
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    .kira-content {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        height: 100% !important;
        max-height: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .kira-right-column {
        width: 250px !important;
        min-width: 250px !important;
        flex: 0 0 250px !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .kira-chapters-panel {
        background-color: rgba(32, 38, 46, 0.78);
        border: 1px solid rgba(217, 117, 25, 0.35);
        border-radius: 14px;
        padding: 12px;
        max-height: calc(100vh - 170px);
        overflow: auto;
        scrollbar-width: thin;
        pointer-events: all;
    }

    .kira-chapters-title {
        color: #d97519;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .kira-chapters-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 6px;
    }

    .kira-chapters-nav,
    .kira-chapters-nav * {
        pointer-events: all;
    }

    .kira-chapter-item a {
        display: block;
        color: #e8edf2;
        text-decoration: none;
        border-radius: 8px;
        background: rgba(12, 16, 22, 0.45);
        padding: 8px 10px;
        line-height: 1.35;
        font-size: 0.9rem;
        transition: transform 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
        pointer-events: all;
    }

    .kira-chapter-item a:hover {
        transform: translateX(4px);
        background: rgba(187, 101, 22, 0.24);
    }

    .kira-chapter-item.is-active a {
        background: #bb6516 !important;
        color: #fff4e8 !important;
        box-shadow: 0 2px 14px rgba(187, 101, 22, 0.55) !important;
    }

    .kira-chapter-item.is-sub a {
        margin-left: 10px;
        font-size: 0.86rem;
        color: #cfd8e6;
    }

    .kira-right-column .kira-backtotop {
        margin-top: auto;
        position: sticky;
        top: calc(100vh - 70px);
        align-self: flex-end;
        right: auto;
        bottom: auto;
    }
}

/* Mobile header: reduce text clutter and keep dark nav bar. */
@media (max-width: 1000px) {

    html,
    body {
        height: auto !important;
        overflow: auto !important;
    }

    .kira-header {
        background: rgba(10, 13, 18, 0.95) !important;
    }

    .kira-header>a::after {
        content: none !important;
    }

    .kira-header>a:last-child::after {
        content: "教程" !important;
        font-size: 0.92rem;
        letter-spacing: 0.02em;
    }

    .kira-header>a:first-child {
        width: 42px;
        min-width: 42px;
    }

    .kira-right-column .kira-chapters-panel {
        display: none !important;
    }
}

/* Shrink in-article images to 50% of their container width. */
.kira-content .kira-main-content article img:not(.kira-post-cover-image) {
    width: 50% !important;
    max-width: 50% !important;
    height: auto !important;
}