:root {
    --material-text: #3c4858;
    --material-muted: #777;
    --material-heading: #2c3340;
    --material-surface: #fff;
    --material-border: #e5e8eb;
    --material-subtle: #f7f9fa;
    --material-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.2), 0 4px 25px 0 rgba(0, 0, 0, 0.08);
}

html,
body,
button,
input {
    font-family: var(--gh-font-body, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif) !important;
}

body {
    color: var(--material-text) !important;
    background: transparent !important;
}

h1,
h2 {
    font-family: var(--gh-font-heading, var(--gh-font-body, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif)) !important;
}

body > div:first-child:not(.ghost-display) {
    background: rgba(13, 17, 23, 0.48) !important;
    background-image: none !important;
}

.bg-white {
    background-color: var(--material-surface) !important;
}

[class*="max-w-"][class~="bg-white"] {
    overflow: hidden;
    border: 1px solid var(--material-border);
    border-radius: 8px !important;
    box-shadow: var(--material-shadow) !important;
}

input {
    background-color: transparent !important;
    color: var(--material-text) !important;
    caret-color: var(--material-accent-foreground);
}

.bg-white.flex.items-center:focus-within {
    box-shadow: inset 0 0 0 2px var(--material-accent-foreground) !important;
}

input::placeholder,
.text-neutral-400,
.text-neutral-500 {
    color: var(--material-muted) !important;
}

.text-neutral-800,
.text-neutral-900 {
    color: var(--material-heading) !important;
}

.border-gray-200,
.border-neutral-200 {
    border-color: var(--material-border) !important;
}

.bg-neutral-100 {
    background-color: var(--material-subtle) !important;
    box-shadow: inset 3px 0 var(--material-accent);
}

.uppercase.text-neutral-400,
svg {
    color: var(--material-accent-foreground) !important;
}

button.w-full:hover,
button.w-full:focus-visible {
    border-color: var(--material-accent-foreground) !important;
    color: var(--material-accent-foreground) !important;
}

button:focus-visible {
    outline: 2px solid var(--material-accent-foreground) !important;
    outline-offset: -2px;
}

input:focus-visible {
    outline: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fadein,
    .animate-popup {
        animation: none !important;
    }
}