:root {
    color-scheme: light dark;
}

#mary-theme-toggle {
    align-items: center;
    background: #252936;
    border: 1px solid #454b5d;
    border-radius: 999px;
    color: #f3f5fa;
    cursor: pointer;
    display: flex;
    font: 600 14px/1 system-ui, sans-serif;
    gap: 0.45rem;
    padding: 0.65rem 0.9rem;
    position: fixed;
    right: 1rem;
    top: 0.8rem;
    z-index: 10000;
}

#mary-theme-toggle:hover {
    background: #343a4a;
}

html.mary-dark,
html.mary-dark body,
html.mary-dark #root,
html.mary-dark #content,
html.mary-dark #mainrow,
html.mary-dark #items,
html.mary-dark #sidebar,
html.mary-dark #fallback {
    background-color: #111318 !important;
    color: #e7e9ee !important;
}

html.mary-dark #toolbar,
html.mary-dark #topbar,
html.mary-dark #bottombar,
html.mary-dark #items .header,
html.mary-dark #fallback th {
    background-color: #1b1e26 !important;
    border-color: #363b49 !important;
    color: #f4f5f8 !important;
}

html.mary-dark #items .item,
html.mary-dark #fallback td,
html.mary-dark #tree .item {
    background-color: #151820 !important;
    border-color: #292e39 !important;
    color: #e7e9ee !important;
}

html.mary-dark #items .item:hover,
html.mary-dark #tree .item:hover,
html.mary-dark #fallback tr:hover td {
    background-color: #232834 !important;
}

html.mary-dark a,
html.mary-dark .label,
html.mary-dark .date,
html.mary-dark .size,
html.mary-dark h1,
html.mary-dark h2 {
    color: #dce7ff !important;
}

html.mary-dark input,
html.mary-dark select,
html.mary-dark #search input {
    background: #20242e !important;
    border-color: #484f61 !important;
    color: #fff !important;
}

html.mary-dark input::placeholder {
    color: #aab0bf !important;
}

/* h5ai text, Markdown, NFO, and source-code preview overlay. The stock preview
   has a white background while inheriting the dark page's white foreground. */
html.mary-dark #pv-overlay {
    background: rgba(4, 6, 10, 0.88) !important;
}

html.mary-dark #pv-content-txt {
    background: #151820 !important;
    border: 1px solid #3a4050 !important;
    color: #e7e9ee !important;
    scrollbar-color: #596174 #151820;
}

html.mary-dark #pv-content-txt p,
html.mary-dark #pv-content-txt li,
html.mary-dark #pv-content-txt pre,
html.mary-dark #pv-content-txt code,
html.mary-dark #pv-content-txt table,
html.mary-dark #pv-content-txt th,
html.mary-dark #pv-content-txt td,
html.mary-dark #pv-content-txt blockquote {
    color: #e7e9ee !important;
}

html.mary-dark #pv-content-txt pre,
html.mary-dark #pv-content-txt code {
    background: #0d1016 !important;
}

html.mary-dark #pv-content-txt th,
html.mary-dark #pv-content-txt td,
html.mary-dark #pv-content-txt hr,
html.mary-dark #pv-content-txt blockquote {
    border-color: #454c5e !important;
}

html.mary-dark #pv-content-txt a,
html.mary-dark #pv-content-txt a:visited {
    color: #86b7ff !important;
}

html.mary-dark #pv-content-txt .ll-nam { color: #7db7ff !important; }
html.mary-dark #pv-content-txt .ll-num { color: #c7a7ff !important; }
html.mary-dark #pv-content-txt .ll-str { color: #8ed49c !important; }
html.mary-dark #pv-content-txt .ll-rex { color: #ff9b8e !important; }
html.mary-dark #pv-content-txt .ll-pct { color: #d7dbe5 !important; }
html.mary-dark #pv-content-txt .ll-key { color: #ffd479 !important; }
html.mary-dark #pv-content-txt .ll-com { color: #9aa3b5 !important; }

html.mary-dark img {
    filter: brightness(1.15);
}

@media (max-width: 700px) {
    #mary-theme-toggle {
        right: 0.5rem;
        top: 0.45rem;
    }
}