/* 用户本地深色模式：与后台皮肤主题叠加使用 */
html[data-theme="dark"] {
    color-scheme: dark;
}

.theme-toggle {
    float: right;
    position: relative;
    width: 32px;
    height: 32px;
    margin-top: -2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #31363a;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .25s ease;
}

.theme-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: rotate(25deg);
}

.theme-toggle:active {
    transform: scale(.92);
}

.theme-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transition: opacity .2s ease, transform .25s ease;
}

html[data-theme="light"] .theme-toggle .icon-sun,
html:not([data-theme]) .theme-toggle .icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
}

html[data-theme="light"] .theme-toggle .icon-moon,
html:not([data-theme]) .theme-toggle .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5) rotate(-90deg);
}

html[data-theme="dark"] .theme-toggle {
    color: #fbbf24;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5) rotate(90deg);
}

html[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
}

html[data-theme="dark"] body {
    color: #e2e8f0;
    background: #2a2a2a !important;
}

html[data-theme="dark"] .nav_jsxs,
html[data-theme="dark"] #footer {
    color: #e2e8f0;
    background: #3a3a3a !important;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .nav_jsxs a,
html[data-theme="dark"] .nav_jsxs .brand-title,
html[data-theme="dark"] .site-header .box-text h1,
html[data-theme="dark"] .box-text p,
html[data-theme="dark"] .block-content .h4,
html[data-theme="dark"] .linep,
html[data-theme="dark"] .url,
html[data-theme="dark"] #footer p,
html[data-theme="dark"] #footer a {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .block.block-link-hover2,
html[data-theme="dark"] .simpleTable,
html[data-theme="dark"] .layui-card,
html[data-theme="dark"] .layui-table-view,
html[data-theme="dark"] .ribbon-box {
    color: #e2e8f0;
    background: #3a3a3a !important;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

html[data-theme="dark"] .block-content .text-muted,
html[data-theme="dark"] .ribbon-box-bottom .fav-meta,
html[data-theme="dark"] .ribbon-box-bottom .fav-meta .layui-icon {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #api-search,
html[data-theme="dark"] .layui-table,
html[data-theme="dark"] .layui-table th,
html[data-theme="dark"] .layui-table td,
html[data-theme="dark"] .layui-elem-quote,
html[data-theme="dark"] .layui-code {
    color: #e2e8f0;
    background: #333 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 苹果柔和渐变主题的深色覆盖：让色彩层次在暗色下保持清晰，而不是简单反色 */
html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] {
    background:
        radial-gradient(circle at -8% -10%, rgba(61, 112, 175, .26), transparent 34rem),
        radial-gradient(circle at 105% 6%, rgba(127, 88, 158, .20), transparent 31rem),
        radial-gradient(circle at 55% 106%, rgba(50, 132, 110, .20), transparent 38rem),
        #121923 !important;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .nav_jsxs,
html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] #footer {
    background: rgba(20, 28, 40, .78) !important;
    border-color: rgba(166, 193, 231, .12);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .nav_jsxs a:not(.logo_jsxs):hover {
    color: #a9cbff;
    background: rgba(126, 170, 239, .12);
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .block.block-link-hover2,
html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .simpleTable,
html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-card,
html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-table-view {
    background: linear-gradient(145deg, rgba(30, 42, 59, .88), rgba(23, 32, 46, .76)) !important;
    border-color: rgba(166, 193, 231, .14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .ribbon-box {
    background: rgba(44, 59, 79, .78) !important;
    border-color: rgba(166, 193, 231, .14);
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] #api-search {
    color: #e8eef8;
    background: rgba(25, 36, 51, .84) !important;
    border-color: rgba(166, 193, 231, .16) !important;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-elem-quote {
    color: #c4d5ee;
    background: linear-gradient(95deg, rgba(36, 70, 111, .54), rgba(62, 47, 91, .44)) !important;
    border-color: rgba(128, 175, 240, .28) !important;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-table,
html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-table th,
html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-table td {
    color: #dbe7f6;
    background: rgba(25, 35, 49, .68) !important;
    border-color: rgba(166, 193, 231, .12) !important;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-table th {
    color: #c6d7ef;
    background: rgba(37, 51, 70, .84) !important;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-tab-title {
    border-bottom-color: rgba(166, 193, 231, .14);
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-tab-title li {
    color: #aebdd0;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-tab-brief > .layui-tab-title .layui-this {
    color: #a9cbff;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom-color: #82b6ff;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .url {
    color: #c4d5ee !important;
    border-bottom-color: #75a8f4 !important;
}

html[data-theme="dark"] body[data-theme-skin="apple-soft-gradient"] .url:hover {
    color: #b9d3ff !important;
    border-bottom-color: #a287ed !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle svg {
        transition: none;
    }
}