/**
 * 跟随系统深色模式（prefers-color-scheme: dark）
 * 在 0bm.css 之后加载，覆盖站点主色与常用组件。
 */

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }

    body,
    #wrap {
        background: #141414 !important;
        color: #e6e6e6 !important;
    }

    #hdr a.logo {
        color: #f0f0f0 !important;
    }

    #hdr .nav,
    #hdr .nav a {
        color: #b8b8b8 !important;
    }

    #nav {
        background-color: #1a1a1a !important;
    }

    #nav .nav-inner {
        background-color: #222 !important;
        background-image: none !important;
    }

    #nav.scroll-to-fixed-fixed {
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.55) !important;
    }

    #nav.scroll-to-fixed-fixed .nav-inner {
        background: #1a1a1a !important;
    }

    #nav li a {
        color: #c8c8c8 !important;
    }

    #nav li.active a {
        background: #2a2a2a !important;
        border-color: #4a4a4a !important;
        color: #5fd4a4 !important;
    }

    #nav.scroll-to-fixed-fixed li.active a {
        border-bottom-color: #5fd4a4 !important;
    }

    a {
        color: #5fd4a4;
    }

    a:hover {
        color: #7ae8b8;
    }

    hr {
        border-top-color: #333 !important;
    }

    acronym {
        border-bottom-color: #888 !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .main h2 {
        color: #eaeaea !important;
    }

    textarea,
    .main textarea.code {
        background-color: #1e1e1e !important;
        color: #e6e6e6 !important;
        border-color: #444 !important;
    }

    textarea:focus {
        border-color: #5fd4a4 !important;
        box-shadow: 0 0 0 2px rgba(95, 212, 164, 0.25) !important;
    }

    .main input.text,
    .main select,
    .main input.number,
    .main input.olink,
    .main input.dlink,
    .main input.phone_number,
    .main input.search-input {
        background-color: #1e1e1e !important;
        color: #e6e6e6 !important;
        border-color: #444 !important;
    }

    .main input.text:focus,
    .main select:focus {
        border-color: #5fd4a4 !important;
        box-shadow: 0 0 0 2px rgba(95, 212, 164, 0.25) !important;
    }

    #py5bdiv {
        border-color: #444 !important;
    }

    kbd {
        background-color: #2a2a2a !important;
        border-color: #555 !important;
        color: #ddd !important;
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.45),
            0 0 0 2px #1e1e1e inset !important;
        text-shadow: none !important;
    }

    #ftr {
        background-color: #0d0d0d !important;
        background-image: none !important;
    }

    #ftr .declare {
        color: #a8a8a8 !important;
    }

    .declare a {
        color: #c4c4c4 !important;
    }

    .declare a:hover {
        color: #7ae8b8 !important;
    }

    #page .item {
        background: #1e1e1e !important;
        border-color: #3a3a3a !important;
    }

    #page .item:hover {
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5) !important;
    }

    #page .item a,
    a.collectable {
        color: #e8e8e8 !important;
    }

    #page .item .item-link {
        color: #909090 !important;
    }

    #page .item .item-category a {
        color: #5fd4a4 !important;
    }

    #page .item a.item-btn:hover::before {
        border-bottom-color: #5fd4a4 !important;
    }

    .loading {
        background-color: #1e1e1e !important;
    }

    .light-window {
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .light-mask {
        background: linear-gradient(to bottom, transparent, #141414) !important;
    }

    .light {
        background: #2c2c2c !important;
    }

    .aside ul.box-list li:hover {
        background: #2a2a2a !important;
    }

    .aside ul.box-list li a {
        color: #e0e0e0 !important;
    }

    .coffee-line-type svg {
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.65) !important;
    }
}