:root {
    --theme-bg: #f8fafc;
    --theme-surface: #ffffff;
    --theme-surface-2: #f1f5f9;
    --theme-text: #0f172a;
    --theme-text-muted: #64748b;
    --theme-border: #e2e8f0;
    --theme-primary: #6366f1;
}

html {
    color-scheme: light;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --theme-bg: #070f1f;
    --theme-surface: #111a2b;
    --theme-surface-2: #182338;
    --theme-text: #ecf2ff;
    --theme-text-muted: #bccbe3;
    --theme-border: #23324a;
    --theme-primary: #8b9cff;
    background: var(--theme-bg);
}

body {
    background: var(--theme-bg);
    color: var(--theme-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

theme-toggle {
    display: inline-flex;
}

html[data-theme='dark'] body {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
}

.theme-toggle {
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-muted);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.26rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.theme-toggle:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.theme-toggle-icon {
    font-size: 0.84rem;
    line-height: 1;
}

.theme-toggle--icon-only .theme-toggle-label {
    display: none;
}

html[data-theme='dark'] .home-navbar,
html[data-theme='dark'] .navbar-glass,
html[data-theme='dark'] .bar-header,
html[data-theme='dark'] .navbar-main {
    background: rgba(11, 18, 32, 0.86) !important;
    border-bottom-color: var(--theme-border) !important;
}

html[data-theme='dark'] .home-brand-name,
html[data-theme='dark'] .brand-text,
html[data-theme='dark'] .brand-text span {
    color: var(--theme-text) !important;
}

html[data-theme='dark'] .home-brand-tagline,
html[data-theme='dark'] .home-nav-link,
html[data-theme='dark'] .nav-link,
html[data-theme='dark'] .nav-links a {
    color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] .home-nav-link:hover,
html[data-theme='dark'] .nav-link:hover,
html[data-theme='dark'] .nav-links a:hover {
    color: var(--theme-primary) !important;
}

html[data-theme='dark'] .search-box,
html[data-theme='dark'] .search-container input,
html[data-theme='dark'] .js-search-host input,
html[data-theme='dark'] input[type='search'],
html[data-theme='dark'] .input {
    background: var(--theme-surface-2) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme='dark'] .search-box::placeholder,
html[data-theme='dark'] .search-container input::placeholder,
html[data-theme='dark'] .js-search-host input::placeholder,
html[data-theme='dark'] input::placeholder {
    color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] .modern-card,
html[data-theme='dark'] .card,
html[data-theme='dark'] .box-item,
html[data-theme='dark'] .table,
html[data-theme='dark'] .panel,
html[data-theme='dark'] .message,
html[data-theme='dark'] .pagination-previous,
html[data-theme='dark'] .pagination-next,
html[data-theme='dark'] .pagination-link,
html[data-theme='dark'] .pagination-btn,
html[data-theme='dark'] .btn-pagination {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme='dark'] .card-title,
html[data-theme='dark'] .card-header-title,
html[data-theme='dark'] .title,
html[data-theme='dark'] .section-title,
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6 {
    color: var(--theme-text) !important;
}

html[data-theme='dark'] p,
html[data-theme='dark'] li,
html[data-theme='dark'] .content,
html[data-theme='dark'] .subtitle,
html[data-theme='dark'] .card-content,
html[data-theme='dark'] .card-description,
html[data-theme='dark'] .pagination-info,
html[data-theme='dark'] .pagination-status,
html[data-theme='dark'] small,
html[data-theme='dark'] time,
html[data-theme='dark'] span {
    color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] a {
    color: #b7c8ff;
}

html[data-theme='dark'] a:hover {
    color: #c7d2fe;
}

html[data-theme='dark'] .post,
html[data-theme='dark'] .post-content,
html[data-theme='dark'] .article-body,
html[data-theme='dark'] .content-wrapper,
html[data-theme='dark'] .section,
html[data-theme='dark'] .container,
html[data-theme='dark'] .container.is-fluid,
html[data-theme='dark'] main,
html[data-theme='dark'] .main-content {
    background: var(--theme-bg) !important;
}

html[data-theme='dark'] .columns,
html[data-theme='dark'] .column {
    background: transparent !important;
}

html[data-theme='dark'] .toc-sticky-container,
html[data-theme='dark'] #toc,
html[data-theme='dark'] .toc-list {
    color: var(--theme-text-muted);
}

html[data-theme='dark'] .toc-sticky-container {
    border-right-color: rgba(148, 163, 184, 0.28) !important;
}

html[data-theme='dark'] .toc-label {
    color: #9fb3d1 !important;
}

html[data-theme='dark'] #toc a,
html[data-theme='dark'] .toc-list a {
    color: #b8c7e0 !important;
}

html[data-theme='dark'] #toc a.toc-h2,
html[data-theme='dark'] .toc-list a.toc-h2 {
    color: #dbe7ff !important;
    font-weight: 600;
}

html[data-theme='dark'] #toc a.toc-h3,
html[data-theme='dark'] .toc-list a.toc-h3 {
    color: #aebdd7 !important;
    opacity: 1 !important;
}

html[data-theme='dark'] #toc a:hover,
html[data-theme='dark'] .toc-list a:hover {
    color: #e7efff !important;
    background: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme='dark'] #toc a.active,
html[data-theme='dark'] div#toc a.active {
    color: #f3f7ff !important;
    border-left-color: #9fb8ff !important;
    background: rgba(99, 102, 241, 0.32) !important;
}

html[data-theme='dark'] blockquote {
    background: rgba(99, 102, 241, 0.08);
    border-left-color: #818cf8 !important;
    color: var(--theme-text) !important;
}

html[data-theme='dark'] hr {
    border-color: var(--theme-border) !important;
    background: var(--theme-border) !important;
}

html[data-theme='dark'] code,
html[data-theme='dark'] pre,
html[data-theme='dark'] kbd,
html[data-theme='dark'] samp {
    color: #f8fafc;
}

html[data-theme='dark'] pre[class*='language-'],
html[data-theme='dark'] code[class*='language-'] {
    text-shadow: none;
}

html[data-theme='dark'] pre,
html[data-theme='dark'] pre[class*='language-'],
html[data-theme='dark'] .hljs {
    background: #111f35 !important;
    border: 1px solid #2b4366 !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(199, 220, 255, 0.06), 0 10px 24px rgba(2, 6, 23, 0.34);
}

html[data-theme='dark'] pre code,
html[data-theme='dark'] pre[class*='language-'] code[class*='language-'],
html[data-theme='dark'] .hljs code {
    background: transparent !important;
    color: #eaf2ff !important;
}

html[data-theme='dark'] :not(pre) > code,
html[data-theme='dark'] p code,
html[data-theme='dark'] li code,
html[data-theme='dark'] td code {
    background: #1a2c47 !important;
    color: #dbe9ff !important;
    border: 1px solid #355076;
    border-radius: 6px !important;
    padding: 0.14rem 0.4rem !important;
}

html[data-theme='dark'] body:not(.admin-page) table,
html[data-theme='dark'] body:not(.admin-page) .content table {
    background: #0f1b30 !important;
    color: #e6efff !important;
    border: 1px solid #2f486b !important;
    border-collapse: collapse;
}

html[data-theme='dark'] body:not(.admin-page) th,
html[data-theme='dark'] body:not(.admin-page) td,
html[data-theme='dark'] body:not(.admin-page) .content th,
html[data-theme='dark'] body:not(.admin-page) .content td {
    color: #dce8ff !important;
    border: 1px solid #2f486b !important;
    background: transparent !important;
}

html[data-theme='dark'] body:not(.admin-page) thead th,
html[data-theme='dark'] body:not(.admin-page) .content thead th {
    background: #1d2f49 !important;
    color: #f3f7ff !important;
}

html[data-theme='dark'] body:not(.admin-page) tbody tr:nth-child(odd),
html[data-theme='dark'] body:not(.admin-page) .content tbody tr:nth-child(odd) {
    background: #111f35 !important;
}

html[data-theme='dark'] body:not(.admin-page) tbody tr:nth-child(even),
html[data-theme='dark'] body:not(.admin-page) .content tbody tr:nth-child(even) {
    background: #172842 !important;
}

html[data-theme='dark'] body:not(.admin-page) tr:hover,
html[data-theme='dark'] body:not(.admin-page) .content tr:hover {
    background: #213652 !important;
}

html[data-theme='dark'] body:not(.admin-page) table a,
html[data-theme='dark'] body:not(.admin-page) .content table a {
    color: #c9d8ff !important;
    text-decoration-color: #9fb8ff !important;
}

html[data-theme='dark'] body:not(.admin-page) table span,
html[data-theme='dark'] body:not(.admin-page) .content table span {
    color: inherit !important;
}

html[data-theme='dark'] .button,
html[data-theme='dark'] button,
html[data-theme='dark'] .tag {
    border-color: var(--theme-border);
}

html[data-theme='dark'] .button.is-outlined,
html[data-theme='dark'] .btn-x,
html[data-theme='dark'] .mobile-only .button.is-outlined {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    background: transparent !important;
}

html[data-theme='dark'] .button.is-outlined:hover,
html[data-theme='dark'] .btn-x:hover {
    background: var(--theme-surface-2) !important;
}

html[data-theme='dark'] footer,
html[data-theme='dark'] .footer,
html[data-theme='dark'] .pagination-footer {
    background: var(--theme-surface) !important;
    border-top-color: var(--theme-border) !important;
}

html[data-theme='dark'] .pagination-footer .pagination-info,
html[data-theme='dark'] .footer p,
html[data-theme='dark'] .footer div,
html[data-theme='dark'] .footer span {
    color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] .footer a,
html[data-theme='dark'] .pagination-footer a {
    color: #9db2ff !important;
}

html[data-theme='dark'] img {
    opacity: 0.96;
}

html[data-theme='dark'] .tag:not(body) {
    color: #f8fafc !important;
}

html[data-theme='dark'] .built {
    color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] .admin-page .page-title,
html[data-theme='dark'] .admin-page h2,
html[data-theme='dark'] .admin-page h3 {
    color: var(--theme-text) !important;
}

html[data-theme='dark'] .admin-page .page-subtitle,
html[data-theme='dark'] .admin-page label,
html[data-theme='dark'] .admin-page .preview-label,
html[data-theme='dark'] .admin-page .preview-empty {
    color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] .admin-page table {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.26) !important;
}

html[data-theme='dark'] .admin-page th {
    background: #0f1a2d !important;
    color: #bed0ec !important;
    border-bottom-color: var(--theme-border) !important;
}

html[data-theme='dark'] .admin-page td {
    color: var(--theme-text-muted) !important;
    border-bottom-color: var(--theme-border) !important;
}

html[data-theme='dark'] .admin-page tr:hover {
    background: rgba(56, 189, 248, 0.08) !important;
}

html[data-theme='dark'] .admin-page .form-card,
html[data-theme='dark'] .admin-page .preview-box,
html[data-theme='dark'] .admin-page .doc-stat,
html[data-theme='dark'] .admin-page .upload-item {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme='dark'] .admin-page input[type='text'],
html[data-theme='dark'] .admin-page input[type='date'],
html[data-theme='dark'] .admin-page textarea,
html[data-theme='dark'] .admin-page select,
html[data-theme='dark'] .admin-page #editor,
html[data-theme='dark'] .admin-page #preview,
html[data-theme='dark'] .admin-page #docMap,
html[data-theme='dark'] .admin-page #inlineToolbar,
html[data-theme='dark'] .admin-page #mediaQueue,
html[data-theme='dark'] .admin-page #fmPanel {
    background: var(--theme-surface-2) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme='dark'] .admin-page .pane-label,
html[data-theme='dark'] .admin-page .tool-title,
html[data-theme='dark'] .admin-page .upload-status,
html[data-theme='dark'] .admin-page .doc-map-subtitle,
html[data-theme='dark'] .admin-page .doc-map-title,
html[data-theme='dark'] .admin-page .img-hint {
    color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] .admin-page .tool-btn,
html[data-theme='dark'] .admin-page .queue-btn,
html[data-theme='dark'] .admin-page #blockConvertSelect,
html[data-theme='dark'] .admin-page .outline-item,
html[data-theme='dark'] .admin-page .outline-level {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme='dark'] .admin-page .outline-item:hover {
    background: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme='dark'] .admin-page .outline-item.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: #818cf8 !important;
    color: #dbeafe !important;
}

html[data-theme='dark'] .admin-page .preview-action,
html[data-theme='dark'] .admin-page .btn-clear,
html[data-theme='dark'] .admin-page #newPostCancel,
html[data-theme='dark'] .admin-page #actionModalCancel,
html[data-theme='dark'] .admin-page #archiveCancelBtn,
html[data-theme='dark'] .admin-page #deleteCancelBtn {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme='dark'] .admin-page dialog {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-border) !important;
}

html[data-theme='dark'] .admin-page dialog::backdrop {
    background: rgba(2, 6, 23, 0.62) !important;
}

html[data-theme='dark'] .admin-post-editor-page .editor-header {
    background: #060d1b !important;
    border-bottom: 1px solid var(--theme-border);
}

html[data-theme='dark'] .admin-post-editor-page .status-indicator {
    color: var(--theme-text-muted) !important;
}

@media (max-width: 1035px) {
    .theme-toggle .theme-toggle-label {
        display: none;
    }

    .theme-toggle {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}