html {
    color-scheme: light;
}
html.theme-dark {
    color-scheme: dark;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #111827;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover {
    background: #eef2f7;
}
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
html.theme-dark .theme-icon-moon { display: none; }
html.theme-dark .theme-icon-sun { display: block; }
html.theme-dark .theme-toggle {
    background: #18181b;
    border-color: #3f3f46;
    color: #f8fafc;
}
html.theme-dark .theme-toggle:hover {
    background: #27272a;
}
html.theme-dark body {
    background-color: #0b0f19 !important;
    color: #f3f4f6 !important;
}
html.theme-dark .card-glass {
    background: rgba(17, 24, 39, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
}

/* Light mode (default): remap the existing dark Tailwind utilities */
html:not(.theme-dark) body {
    background-color: #f4f7fb !important;
    color: #111827 !important;
}
html:not(.theme-dark) .card-glass {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

html:not(.theme-dark) main .text-white,
html:not(.theme-dark) footer .text-white,
html:not(.theme-dark) main .text-gray-200 {
    color: #111827 !important;
}
html:not(.theme-dark) main .text-gray-300,
html:not(.theme-dark) main .text-gray-400 {
    color: #4b5563 !important;
}
html:not(.theme-dark) .text-gray-500 {
    color: #6b7280 !important;
}
html:not(.theme-dark) main .text-cyan-400 {
    color: #0891b2 !important;
}
html:not(.theme-dark) footer a:hover,
html:not(.theme-dark) .hover\:text-gray-300:hover,
html:not(.theme-dark) main .hover\:text-white:hover {
    color: #111827 !important;
}

html:not(.theme-dark) main .bg-zinc-900,
html:not(.theme-dark) main .bg-zinc-900\/80,
html:not(.theme-dark) main .bg-zinc-900\/60,
html:not(.theme-dark) main .bg-zinc-900\/50,
html:not(.theme-dark) main .bg-zinc-900\/40 {
    background-color: #f3f4f6 !important;
}
html:not(.theme-dark) main .bg-zinc-800 {
    background-color: #e5e7eb !important;
}
html:not(.theme-dark) main .border-zinc-800,
html:not(.theme-dark) main .border-zinc-800\/80,
html:not(.theme-dark) main .border-zinc-800\/50,
html:not(.theme-dark) main .border-zinc-800\/40,
html:not(.theme-dark) main .border-zinc-700,
html:not(.theme-dark) main .border-zinc-700\/80,
html:not(.theme-dark) footer.border-t,
html:not(.theme-dark) .border-zinc-900 {
    border-color: #e5e7eb !important;
}

html:not(.theme-dark) main a.bg-white,
html:not(.theme-dark) main button.bg-white,
html:not(.theme-dark) main span.bg-white {
    background-color: #111827 !important;
    color: #ffffff !important;
}
html:not(.theme-dark) main a.bg-white:hover,
html:not(.theme-dark) main button.bg-white:hover {
    background-color: #1f2937 !important;
}
html:not(.theme-dark) main a.bg-zinc-900,
html:not(.theme-dark) main a.hover\:bg-zinc-800:hover {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

html:not(.theme-dark) main input,
html:not(.theme-dark) main select,
html:not(.theme-dark) main textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

html:not(.theme-dark) .from-zinc-800 {
    --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
}
html:not(.theme-dark) .from-zinc-900,
html:not(.theme-dark) .via-zinc-900,
html:not(.theme-dark) .to-zinc-900,
html:not(.theme-dark) .to-zinc-950 {
    --tw-gradient-from: #eef2f7 var(--tw-gradient-from-position);
    --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #f3f4f6, var(--tw-gradient-to);
}
html:not(.theme-dark) .from-cyan-950\/70,
html:not(.theme-dark) .from-cyan-950\/60,
html:not(.theme-dark) .from-cyan-950\/40 {
    --tw-gradient-from: #ecfeff var(--tw-gradient-from-position);
}
html:not(.theme-dark) .to-blue-950\/40 {
    --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}
html:not(.theme-dark) .via-zinc-900\/30 {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(15, 23, 42, 0.06), var(--tw-gradient-to);
}

html:not(.theme-dark) .category-pill {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}
html:not(.theme-dark) .category-pill.active {
    background: #06b6d4;
    color: #ffffff;
    border-color: #06b6d4;
}

/* Balance heading lines. Gradient subtitles stay normal wrap so they don't collapse into a narrow column. */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
.gradient-brand {
    text-wrap: wrap;
}
p, li, summary, blockquote, figcaption, td, th, label {
    text-wrap: pretty;
}

/* Phone: English footer labels are longer than Chinese, so keep them in two even columns */
.pv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f4f2ec;
    border-radius: 22%;
    overflow: hidden;
    flex: none;
    line-height: 0;
    vertical-align: middle;
}
.pv-badge img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    display: block;
}
.pv-badge-xs {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.4rem;
    margin-right: 0.4rem;
    vertical-align: -0.2rem;
}

@media (max-width: 1023px) {
    header nav {
        padding-left: 0.9rem;
        padding-right: 0.7rem;
    }
    header nav .nav-tools {
        gap: 0.2rem;
    }
    header nav #mobile-menu-btn {
        margin-left: 0;
        padding: 0.3rem;
    }
}

@media (max-width: 639px) {
    html[lang^="en"] footer .footer-links {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: center;
        justify-items: start;
        column-gap: 1rem;
        row-gap: 0.5rem;
    }
}