/* 默认和浅色主题的CSS变量 */
:root,
html.light {
    --custom-border-color: rgba(244, 244, 244, 0.382);
    --custom-background-color: rgba(244, 244, 244, 0.618);
    --custom-text-color: #333;
    --custom-shadow-color: rgba(244, 244, 244, 0.5);
}

/* 暗色主题的CSS变量 */
html.dark {
    --custom-border-color: rgba(11, 11, 11, 0.382);
    --custom-background-color: rgba(11, 11, 11, 0.618);
    --custom-text-color: #fff;
    --custom-shadow-color: rgba(11, 11, 11, 0.5);
}

html.dark #root {
    background-color: unset !important;
}

/* 背景图片压暗和模糊, 开了背景图建议开启 */
.dark .bg-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.3);
}

.light .bg-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.3);
}

.bg-card,
html.dark .bg-card,
html.light .bg-card {
    background-color: var(--custom-background-color);
    backdrop-filter: blur(4px);
    border: 1px solid var(--custom-border-color);
    box-shadow: 0 4px 6px var(--custom-shadow-color);
}

.focus\:text-accent-foreground:focus {
    background-color: var(--custom-background-color);
    opacity: 0.8;
}

.text-muted-foreground,
html.dark .text-muted-foreground,
html.light .text-muted-foreground {
    color: var(--custom-text-color);
}

html.dark .dark\:bg-stone-700,
html.light .bg-stone-700,
.bg-stone-700 {
    --tw-bg-opacity: 0.5;
    background-color: var(--custom-background-color);
}

html *,
html.dark *,
html.light * {
    border-color: var(--custom-border-color);
}

html body,
html.dark body,
html.light body {
    color: var(--custom-text-color);
    background: unset;
    position: relative;
}

img {
    border: none;
}

html.dark .dark\:border-neutral-800,
html.light .border-neutral-800,
.border-neutral-800 {
    border-color: var(--custom-border-color);
}

html.dark .dark\:bg-stone-800,
html.light .bg-stone-800,
.bg-stone-800 {
    --tw-bg-opacity: 0.5;
    background-color: var(--custom-background-color);
}

html.dark .dark\:text-stone-500,
html.light .text-stone-500,
.text-stone-500 {
    color: var(--custom-text-color);
}

.bg-secondary,
html.dark .bg-secondary,
html.light .bg-secondary {
    background-color: var(--custom-background-color);
    opacity: 0.7;
}

.bg-popover,
html.dark .bg-popover,
html.light .bg-popover {
    background-color: var(--custom-background-color);
}

.bg-muted,
html.dark .bg-muted,
html.light .bg-muted {
    background-color: var(--custom-border-color);
}

html.dark .dark\:bg-black,
html.light .bg-black,
.bg-black {
    background-color: var(--custom-border-color);
}

.bg-border,
html.dark .bg-border,
html.light .bg-border {
    background-color: var(--custom-border-color);
}

.border-input,
html.dark .border-input,
html.light .border-input {
    border-color: var(--custom-border-color);
}

html.dark .dark\:text-neutral-300\/50,
html.light .text-neutral-300,
.text-neutral-300 {
    color: var(--custom-text-color);
    opacity: 0.7;
}

html.dark .dark\:text-stone-400,
html.light .text-stone-400,
.text-stone-400 {
    color: var(--custom-text-color);
}

div#radix-\:r4\: {
    background: var(--custom-background-color);
    backdrop-filter: blur(4px);
}

.text-green-600 {
    color: rgb(34, 197, 94);
}

.bg-green-600 {
    background-color: rgb(34, 197, 94);
}

.vps-info,
html.dark .vps-info,
html.light .vps-info {
    border-radius: 12px;
    padding: 12px;
    background-color: var(--custom-background-color);
    backdrop-filter: blur(4px);
}

.font-medium.opacity-40,
html.dark .font-medium.opacity-40,
html.light .font-medium.opacity-40 {
    opacity: 0.8 !important;
}

.font-medium.opacity-50,
html.dark .font-medium.opacity-50,
html.light .font-medium.opacity-50 {
    opacity: 0.8 !important;
}

.max-w-5xl.gap-4 > div:first-child,
html.dark .max-w-5xl.gap-4 > div:first-child,
html.light .max-w-5xl.gap-4 > div:first-child {
    background-color: var(--custom-background-color);
    backdrop-filter: blur(4px);
    border: 1px solid var(--custom-border-color);
    box-shadow: 0 4px 6px var(--custom-shadow-color);
    border-radius: 12px;
    padding: 12px;
}

img[alt="BackIcon"] {
    margin-right: 12px;
}

.flex.items-center.gap-1.rounded-\[50px\].bg-stone-100.p-\[3px\],
html.dark .flex.items-center.gap-1.rounded-\[50px\].bg-stone-100.p-\[3px\],
html.light .flex.items-center.gap-1.rounded-\[50px\].bg-stone-100.p-\[3px\],
html.dark .dark\:bg-stone-800 {
    background-color: var(--custom-background-color);
    backdrop-filter: blur(4px);
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground
    .recharts-cartesian-axis-tick
    text {
    fill: var(--custom-text-color);
}

html.dark .dark\:fill-neutral-800,
html.light .fill-neutral-800,
.fill-neutral-800 {
    fill: var(--custom-text-color);
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
    background-color: var(--custom-background-color);
    backdrop-filter: blur(4px);
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: var(--custom-background-color);
    backdrop-filter: blur(4px);
}

.rounded-lg {
    background-color: var(--custom-background-color) !important;
    backdrop-filter: blur(5px) !important;
    border-radius: 15px !important;
    border: 1px solid var(--custom-border-color) !important;
}

html.dark .dark\:bg-black\/70,
html.light .bg-black\/70,
.bg-black\/70 {
    background-color: var(--custom-background-color) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid var(--custom-border-color) !important;
}