:root {
        --cyan: #00d4ff;
        --purple: #a855f7;
        --green: #22c55e;
        --spacing: 0.25rem;
    }

    * {
        box-sizing: border-box;
    }


    .w-64 {
        width: 16rem;
    }

    .right-0 {
        right: 0px;
    }

    html {
        scroll-behavior: smooth;
    }

    #resources,
    #domain,
    #servers,
    #ai,
    #faq {
        scroll-margin-top: 68px;
    }

    @media (min-width: 640px) {

        #resources,
        #domain,
        #servers,
        #ai,
        #faq {
            scroll-margin-top: 82px;
        }
    }

    body {
        background: #080b14;
        color: #e2e8f0;
        font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        min-height: 100vh;
        overflow-x: hidden;
    }

    [x-cloak] {
        display: none !important;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* ── 动态网格背景 ── */
    .grid-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        background-image:
            linear-gradient(rgba(0, 212, 255, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 212, 255, .035) 1px, transparent 1px);
        background-size: 48px 48px;
        animation: gridMove 24s linear infinite;
        pointer-events: none;
    }

    @keyframes gridMove {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 48px 48px;
        }
    }

    /* ── 辉光球 ── */
    .orb {
        position: fixed;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }

    .orb-1 {
        width: 600px;
        height: 600px;
        top: -250px;
        left: -200px;
        background: radial-gradient(circle, rgba(168, 85, 247, .13), transparent 70%);
    }

    .orb-2 {
        width: 500px;
        height: 500px;
        bottom: -150px;
        right: -150px;
        background: radial-gradient(circle, rgba(0, 212, 255, .10), transparent 70%);
    }

    .orb-3 {
        width: 300px;
        height: 300px;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        background: radial-gradient(circle, rgba(168, 85, 247, .07), transparent 70%);
    }

    /* ── 毛玻璃卡片 ── */
    .glass {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 1rem;
    }

    .glass-hover {
        transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    }

    .glass-hover:hover {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(0, 212, 255, .25);
        transform: translateY(-3px);
        box-shadow: 0 12px 40px rgba(0, 212, 255, .08);
    }

    /* ── 渐变按钮 ── */
    .btn-primary {
        background: linear-gradient(135deg, var(--cyan), var(--purple));
        color: #fff;
        font-weight: 600;
        border: none;
        border-radius: .625rem;
        cursor: pointer;
        transition: opacity .2s, transform .15s, box-shadow .2s;
    }

    .btn-primary:hover {
        opacity: .9;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0, 212, 255, .25);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

    .btn-primary:disabled {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

    /* ── 渐变文字 ── */
    .grad-text {
        background: linear-gradient(135deg, var(--cyan), var(--purple));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ── 入场动画 ── */
    .fade-up {
        opacity: 0;
        transform: translateY(24px);
        animation: fadeUp .6s ease forwards;
    }

    @keyframes fadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .delay-1 {
        animation-delay: .1s;
    }

    .delay-2 {
        animation-delay: .2s;
    }

    .delay-3 {
        animation-delay: .3s;
    }

    .delay-4 {
        animation-delay: .4s;
    }

    .delay-5 {
        animation-delay: .5s;
    }

    /* ── 章节标题 ── */
    .section-title {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.2;
    }

    @media (max-width: 640px) {
        .section-title {
            font-size: 1.5rem;
        }
    }

    .footer-link {
        color: rgba(255, 255, 255, .35);
        font-size: .75rem;
        transition: color .2s, transform .2s;
    }

    .mobile-dock-wrap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 40;
        display: flex;
        justify-content: center;
        pointer-events: none;
    }

    .mobile-dock {
        pointer-events: auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .12rem;
        width: min(calc(100vw - 18px), 410px);
        padding: .32rem;
        border-radius: 1.3rem;
        background: rgba(12, 16, 28, .72);
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow:
            0 18px 40px rgba(0, 0, 0, .28),
            inset 0 1px 0 rgba(255, 255, 255, .08);
        backdrop-filter: blur(22px) saturate(135%);
        -webkit-backdrop-filter: blur(22px) saturate(135%);
    }

    .mobile-dock-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .22rem;
        min-height: 50px;
        border-radius: 1rem;
        color: rgba(255, 255, 255, .42);
        transition: color .2s ease, transform .2s ease, background .2s ease;
    }

    .mobile-dock-item span {
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }

    .mobile-dock-item:hover,
    .mobile-dock-item:focus {
        color: #fff;
        transform: translateY(-1px);
        background: rgba(255, 255, 255, .05);
    }

    .frontend-site-header {
        transition: transform .28s ease, opacity .28s ease;
    }

    @media (max-width: 767px) {
        body.user-mobile-focus .frontend-site-header {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }

        html.theme-light body.user-mobile-focus {
            background: #f8fafc;
        }

        html.theme-light .user-mobile-panel {
            background: #f8fafc !important;
        }

        html.theme-light .user-mobile-topbar {
            background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)) !important;
            border-bottom: 1px solid rgba(148, 163, 184, .22) !important;
            box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
        }
    }

    .footer-link:hover,
    .footer-link:focus {
        color: #fff;
        transform: translateY(-1px);
    }

    .tool-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .tool-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .12);
        border-radius: 999px;
    }

    .tool-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .thin-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .16) transparent;
    }

    .thin-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .thin-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .16);
        border-radius: 999px;
        border: 1px solid transparent;
        background-clip: padding-box;
    }

    .thin-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .user-center-outline-btn {
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .promotion-subtab {
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .1);
        color: rgba(255, 255, 255, .74);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .promotion-subtab.is-active {
        background: rgba(168, 85, 247, .16);
        border-color: rgba(168, 85, 247, .22);
        color: #f5d0fe;
    }

    .user-center-permission-wrap {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
    }

    .user-center-permission-title {
        color: rgba(255, 255, 255, .45);
    }

    .user-center-permission-card {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    }

    .user-center-permission-label {
        color: rgba(255, 255, 255, .36);
    }

    .user-center-permission-value {
        color: #fff;
    }

    .user-center-permission-status-on {
        color: #86efac;
    }

    .user-center-permission-status-off {
        color: #fca5a5;
    }

    html.theme-light .thin-scrollbar {
        scrollbar-color: rgba(148, 163, 184, .46) transparent;
    }

    html.theme-light .thin-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, .46);
    }

    html.theme-light .user-center-outline-btn {
        border-color: rgba(148, 163, 184, .28) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    }

    html.theme-light .promotion-subtab {
        background: rgba(255, 255, 255, .92) !important;
        border-color: rgba(203, 213, 225, .72) !important;
        color: #334155 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    }

    html.theme-light .promotion-subtab.is-active {
        background: rgba(139, 92, 246, .14) !important;
        border-color: rgba(139, 92, 246, .28) !important;
        color: #6d28d9 !important;
    }

    html.theme-light .user-center-permission-wrap {
        background: #fff !important;
        border-color: rgba(229, 231, 235, 1) !important;
    }

    html.theme-light .user-center-permission-title {
        color: #6b7280 !important;
    }

    html.theme-light .user-center-permission-card {
        background: rgba(249, 250, 251, .8) !important;
        border-color: rgba(229, 231, 235, 1) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    }

    html.theme-light .user-center-permission-label {
        color: #9ca3af !important;
    }

    html.theme-light .user-center-permission-value {
        color: #111827 !important;
    }

    html.theme-light .user-center-permission-status-on {
        color: #059669 !important;
    }

    html.theme-light .user-center-permission-status-off {
        color: #f43f5e !important;
    }

    .user-center-shell .overflow-y-auto,
    .user-center-overlay .overflow-y-auto,
    .info-modal-shell .overflow-y-auto,
    .shop-qr-shell .overflow-y-auto,
    .tool-frame-shell .overflow-y-auto {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .16) transparent;
    }

    .user-center-shell .overflow-y-auto::-webkit-scrollbar,
    .user-center-overlay .overflow-y-auto::-webkit-scrollbar,
    .info-modal-shell .overflow-y-auto::-webkit-scrollbar,
    .shop-qr-shell .overflow-y-auto::-webkit-scrollbar,
    .tool-frame-shell .overflow-y-auto::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .user-center-shell .overflow-y-auto::-webkit-scrollbar-thumb,
    .user-center-overlay .overflow-y-auto::-webkit-scrollbar-thumb,
    .info-modal-shell .overflow-y-auto::-webkit-scrollbar-thumb,
    .shop-qr-shell .overflow-y-auto::-webkit-scrollbar-thumb,
    .tool-frame-shell .overflow-y-auto::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .16);
        border-radius: 999px;
    }

    .user-center-shell .overflow-y-auto::-webkit-scrollbar-track,
    .user-center-overlay .overflow-y-auto::-webkit-scrollbar-track,
    .info-modal-shell .overflow-y-auto::-webkit-scrollbar-track,
    .shop-qr-shell .overflow-y-auto::-webkit-scrollbar-track,
    .tool-frame-shell .overflow-y-auto::-webkit-scrollbar-track {
        background: transparent;
    }

    .tool-frame-close {
        color: #fff !important;
        font-weight: 700;
        text-shadow: 0 0 0 rgba(255, 255, 255, .95);
    }

    html.theme-light .user-center-shell .overflow-y-auto,
    html.theme-light .user-center-overlay .overflow-y-auto,
    html.theme-light .info-modal-shell .overflow-y-auto,
    html.theme-light .shop-qr-shell .overflow-y-auto,
    html.theme-light .tool-frame-shell .overflow-y-auto {
        scrollbar-color: rgba(148, 163, 184, .46) transparent;
    }

    html.theme-light .user-center-shell .overflow-y-auto::-webkit-scrollbar-thumb,
    html.theme-light .user-center-overlay .overflow-y-auto::-webkit-scrollbar-thumb,
    html.theme-light .info-modal-shell .overflow-y-auto::-webkit-scrollbar-thumb,
    html.theme-light .shop-qr-shell .overflow-y-auto::-webkit-scrollbar-thumb,
    html.theme-light .tool-frame-shell .overflow-y-auto::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, .46);
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* ── 输入框 ── */
    .inp {
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: .5rem;
        color: #e2e8f0;
        padding: .625rem .875rem;
        width: 100%;
        font-size: .875rem;
        transition: border-color .2s;
        outline: none;
    }

    .inp::placeholder {
        color: rgba(255, 255, 255, .3);
    }

    .inp:focus {
        border-color: var(--cyan);
    }

    .touch-target {
        min-width: 44px;
        min-height: 44px;
    }

    /* ── 支付方式选择 ── */
    .pay-btn {
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: .5rem;
        padding: .5rem .875rem;
        font-size: .8125rem;
        cursor: pointer;
        transition: border-color .2s, background .2s;
        background: rgba(255, 255, 255, .04);
        color: #cbd5e1;
    }

    .pay-btn.active {
        border-color: var(--cyan);
        background: rgba(0, 212, 255, .1);
        color: var(--cyan);
        box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .18), 0 8px 20px rgba(0, 212, 255, .12);
        position: relative;
    }

    /* ── 产品卡片选中 ── */
    .product-card {
        transition: border-color .2s, background .2s, transform .2s;
    }

    .product-card.selected {
        border-color: var(--cyan) !important;
        background: rgba(0, 212, 255, .07) !important;
    }

    /* ── 分隔线 ── */
    .section-divider {
        border: none;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
        margin: 0;
    }

    /* ── 导航 ── */
    .nav-link {
        color: rgba(255, 255, 255, .6);
        font-size: .875rem;
        text-decoration: none;
        transition: color .2s;
    }

    .nav-link:hover {
        color: var(--cyan);
    }

    /* 适度抬高默认主题常用弱文字的对比度，避免 Lighthouse 因过低透明度持续扣分。 */
    [style*="color:rgba(255,255,255,.22);"],
    [style*="color:rgba(255,255,255,.28);"],
    [style*="color:rgba(255,255,255,.3);"],
    [style*="color:rgba(255,255,255,.32);"],
    [style*="color:rgba(255,255,255,.34);"],
    [style*="color:rgba(255,255,255,.35);"],
    [style*="color:rgba(255,255,255,.36);"],
    [style*="color:rgba(255,255,255,.38);"],
    [style*="color:rgba(255,255,255,.4);"],
    [style*="color:rgba(255,255,255,.42);"],
    [style*="color:rgba(255,255,255,.45);"],
    [style*="color:rgba(255,255,255,.46);"],
    [style*="color:rgba(255,255,255,.48);"],
    [style*="color:rgba(255,255,255,.5);"],
    [style*="color:rgba(255,255,255,.54);"],
    [style*="color:rgba(255,255,255,.56);"],
    [style*="color:rgba(255,255,255,.58);"] {
        color: rgba(255, 255, 255, .76) !important;
    }

    .text-white\/20,
    .text-white\/30,
    .text-white\/40,
    .text-white\/45,
    .text-white\/50,
    .text-white\/60,
    .text-white\/70 {
        color: rgba(255, 255, 255, .78) !important;
    }

    /* ── FAQ 折叠 ── */
    .faq-item {
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .faq-item:last-child {
        border-bottom: none;
    }

    /** ══ 彩虹渐变背景 ══ */
    .text-grass {
        background: linear-gradient(90deg, #ff4d4d, #e63535, #ff6347, #ff0000, #ff7f50, #ff4500, #ff1493, #ff8c00, #ff00ff, #ff00ff, #9932cc, #8a2be2, #4b0082, #483d8b, #0000ff, #000080);
    }


    /* ========== 信息弹窗正文：黑色主题 ========== */
    .info-modal-shell [x-html] {
        color: rgba(255, 255, 255, 0.82);
    }

    .info-modal-shell [x-html] h3,
    .info-modal-shell [x-html] h4,
    .info-modal-shell [x-html] .text-slate-900 {
        color: rgba(255, 255, 255, 0.96) !important;
    }

    .info-modal-shell [x-html] p,
    .info-modal-shell [x-html] div,
    .info-modal-shell [x-html] li,
    .info-modal-shell [x-html] .text-slate-700 {
        color: rgba(255, 255, 255, 0.76) !important;
    }

    .info-modal-shell [x-html] .text-slate-500 {
        color: rgba(255, 255, 255, 0.46) !important;
    }

    .info-modal-shell [x-html] .bg-slate-50\/80,
    .info-modal-shell [x-html] .bg-slate-50,
    .info-modal-shell [x-html] .dark\:bg-white\/5 {
        background: rgba(255, 255, 255, 0.045) !important;
    }

    .info-modal-shell [x-html] .border-slate-200,
    .info-modal-shell [x-html] .dark\:border-white\/10 {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .info-modal-shell [x-html] .text-emerald-500 {
        color: #86efac !important;
    }

    .info-modal-shell [x-html] .text-rose-500 {
        color: #fda4af !important;
    }

    .info-modal-shell [x-html] code {
        color: #7dd3fc !important;
        background: rgba(255, 255, 255, 0.06) !important;
        padding: 0.1rem 0.35rem;
        border-radius: 0.35rem;
    }


    /** light */
    html.theme-light body {
        background: #f6f8fb;
        color: #0f172a;
    }

    html.theme-light .grid-bg {
        background-image:
            linear-gradient(rgba(15, 23, 42, .04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
    }

    html.theme-light .orb-1 {
        background: radial-gradient(circle, rgba(14, 165, 233, .10), transparent 70%);
    }

    html.theme-light .orb-2 {
        background: radial-gradient(circle, rgba(99, 102, 241, .08), transparent 70%);
    }

    html.theme-light .orb-3 {
        background: radial-gradient(circle, rgba(56, 189, 248, .05), transparent 70%);
    }

    html.theme-light .glass {
        background: rgba(255, 255, 255, .84);
        border-color: rgba(15, 23, 42, .08);
        box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
    }

    html.theme-light .glass-hover:hover {
        background: rgba(255, 255, 255, .96);
        border-color: rgba(14, 165, 233, .18);
        box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
    }

    html.theme-light .text-white {
        color: #0f172a !important;
    }

    html.theme-light .text-white\/60,
    html.theme-light .text-white\/50,
    html.theme-light .text-white\/40,
    html.theme-light .text-white\/30,
    html.theme-light .text-white\/20 {
        color: rgba(15, 23, 42, .58) !important;
    }

    html.theme-light [style*="color:rgba(255,255,255"] {
        color: rgba(15, 23, 42, .62) !important;
    }

    html.theme-light [style*="color:#fff"] {
        color: #0f172a !important;
    }

    html.theme-light [style*="background:rgba(255,255,255,.04)"] {
        background: rgba(255, 255, 255, .86) !important;
    }

    html.theme-light [style*="background:rgba(255,255,255,.05)"] {
        background: rgba(255, 255, 255, .9) !important;
    }

    html.theme-light [style*="border:1px solid rgba(255,255,255,.08)"] {
        border-color: rgba(15, 23, 42, .08) !important;
    }

    html.theme-light [style*="border:1px solid rgba(255,255,255,.15)"] {
        border-color: rgba(148, 163, 184, .38) !important;
    }

    html.theme-light [style*="border:1px solid rgba(255,255,255,.14)"] {
        border-color: rgba(148, 163, 184, .35) !important;
    }

    html.theme-light [style*="border:1px solid rgba(255,255,255,.12)"] {
        border-color: rgba(148, 163, 184, .32) !important;
    }

    html.theme-light [style*="border:1px solid rgba(255,255,255,.07)"] {
        border-color: rgba(148, 163, 184, .22) !important;
    }

    html.theme-light [style*="border:1px solid rgba(255,255,255,.06)"] {
        border-color: rgba(148, 163, 184, .18) !important;
    }

    html.theme-light [style*="border-color:rgba(255,255,255,.08)"] {
        border-color: rgba(15, 23, 42, .08) !important;
    }

    html.theme-light .footer-link,
    html.theme-light .nav-link,
    html.theme-light .mobile-dock-item {
        color: rgba(15, 23, 42, .58);
    }

    html.theme-light .mobile-dock {
        background: rgba(255, 255, 255, .82);
        border-color: rgba(15, 23, 42, .08);
        box-shadow:
            0 18px 40px rgba(15, 23, 42, .12),
            inset 0 1px 0 rgba(255, 255, 255, .7);
    }

    html.theme-light .mobile-dock-item:hover,
    html.theme-light .mobile-dock-item:focus {
        color: #0f172a;
        background: rgba(15, 23, 42, .05);
    }

    html.theme-light .inp {
        background: rgba(255, 255, 255, .98);
        border-color: rgba(148, 163, 184, .35);
        color: #0f172a;
    }

    html.theme-light .inp::placeholder {
        color: rgba(15, 23, 42, .32);
    }

    html.theme-light .pay-btn {
        background: rgba(255, 255, 255, .88);
        border-color: rgba(148, 163, 184, .35);
        color: rgba(15, 23, 42, .68);
    }

    html.theme-light .pay-btn.active {
        background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(99, 102, 241, .10));
        border-color: rgba(14, 165, 233, .42);
        color: #0369a1;
        box-shadow: inset 0 0 0 1px rgba(14, 165, 233, .22), 0 10px 24px rgba(14, 165, 233, .12);
    }

    html.theme-light .section-divider {
        background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .08), transparent);
    }

    html.theme-light .faq-item {
        border-bottom-color: rgba(148, 163, 184, .26);
    }

    html.theme-light .user-center-overlay {
        background: rgba(248, 250, 252, .78) !important;
        backdrop-filter: blur(10px);
    }

    html.theme-light .user-center-shell {
        background:
            radial-gradient(circle at top, rgba(14, 165, 233, .12), transparent 42%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)) !important;
        border-color: rgba(148, 163, 184, .22) !important;
        box-shadow:
            0 24px 60px rgba(15, 23, 42, .12),
            inset 0 1px 0 rgba(255, 255, 255, .82) !important;
    }

    html.theme-light .user-center-login-card {
        background: rgba(255, 255, 255, .88) !important;
        border-color: rgba(148, 163, 184, .18) !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
    }

    html.theme-light .user-center-topbar {
        background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)) !important;
        border-color: rgba(148, 163, 184, .18) !important;
    }

    html.theme-light .user-center-tabs {
        background: rgba(255, 255, 255, .72) !important;
        border-color: rgba(148, 163, 184, .18) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    }

    html.theme-light .join-btn {
        background: rgba(255, 255, 255, .52) !important;
    }

    html.theme-light .user-center-empty,
    html.theme-light .agency-note,
    html.theme-light .agency-desc,
    html.theme-light .agency-card-desc,
    html.theme-light .agency-card-days {
        color: rgba(51, 65, 85, .72) !important;
    }

    html.theme-light .agency-group-card {
        background: rgba(255, 255, 255, .82) !important;
        border-color: rgba(148, 163, 184, .18) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
    }

    html.theme-light .user-agency-shell .text-white\/45,
    html.theme-light .user-agency-shell .hover\:text-white,
    html.theme-light .user-agency-shell button[style*="rgba(255,255,255,.82)"] {
        color: rgba(51, 65, 85, .82) !important;
    }

    html.theme-light .user-agency-shell button[style*="border:1px solid rgba(255,255,255,.1)"] {
        border-color: rgba(148, 163, 184, .22) !important;
        background: rgba(255, 255, 255, .88) !important;
    }

    html.theme-light .agency-arrow {
        background: rgba(255, 255, 255, .88) !important;
        border-color: rgba(148, 163, 184, .22) !important;
        color: rgba(51, 65, 85, .78) !important;
    }

    html.theme-light .domain-price-list .glass {
        background: transparent !important;
        box-shadow: none !important;
    }

    html.theme-light .shop-buy-overlay,
    html.theme-light .shop-qr-overlay {
        background: rgba(248, 250, 252, .78) !important;
        backdrop-filter: blur(10px);
    }

    html.theme-light [x-show="$store.toolFrame.show"] {
        background: rgba(241, 245, 249, .68) !important;
        backdrop-filter: blur(12px) saturate(125%) !important;
    }

    html.theme-light .shop-buy-shell,
    html.theme-light .shop-qr-shell,
    html.theme-light .tool-frame-shell,
    html.theme-light .info-modal-shell {
        background:
            radial-gradient(circle at top, rgba(14, 165, 233, .10), transparent 40%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95)) !important;
        border-color: rgba(148, 163, 184, .22) !important;
        box-shadow:
            0 24px 60px rgba(15, 23, 42, .12),
            inset 0 1px 0 rgba(255, 255, 255, .82) !important;
    }

    html.theme-light .tool-frame-close {
        color: #fff !important;
    }

    html.theme-light .user-account-hero {
        background:
            radial-gradient(circle at top, rgba(14, 165, 233, .14), transparent 40%),
            linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(241, 245, 249, .96)) !important;
        border: 1px solid rgba(148, 163, 184, .22) !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
    }

    html.theme-light .tool-frame-shell [style*="background:linear-gradient(180deg, rgba(10,14,24,.86)"] {
        background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(241, 245, 249, .88)) !important;
    }

    html.theme-light .shop-qr-title {
        color: #0f172a !important;
    }

    html.theme-light .shop-qr-close,
    html.theme-light .shop-qr-meta,
    html.theme-light .shop-qr-helper,
    html.theme-light .shop-qr-countdown,
    html.theme-light .shop-qr-orderlabel,
    html.theme-light .shop-qr-orderno,
    html.theme-light .shop-qr-delivery-head,
    html.theme-light .shop-qr-delivery-empty {
        color: rgba(51, 65, 85, .72) !important;
    }

    html.theme-light .shop-qr-tip {
        background: rgba(14, 165, 233, .10) !important;
        border-color: rgba(14, 165, 233, .18) !important;
        color: #334155 !important;
    }

    html.theme-light .shop-qr-pending {
        background: rgba(255, 255, 255, .86) !important;
        border-color: rgba(148, 163, 184, .22) !important;
        color: rgba(51, 65, 85, .72) !important;
    }

    html.theme-light .shop-qr-success {
        background: rgba(34, 197, 94, .10) !important;
        border-color: rgba(34, 197, 94, .18) !important;
        color: #166534 !important;
    }

    html.theme-light .shop-qr-fulfill {
        background: rgba(14, 165, 233, .10) !important;
        border-color: rgba(14, 165, 233, .18) !important;
        color: #334155 !important;
    }

    html.theme-light .shop-qr-delivery,
    html.theme-light .shop-qr-orderbox {
        background: rgba(255, 255, 255, .82) !important;
        border-color: rgba(148, 163, 184, .18) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    }

    html.theme-light .shop-qr-delivery-item {
        background: rgba(248, 250, 252, .92) !important;
        border-color: rgba(148, 163, 184, .16) !important;
    }

    html.theme-light .shop-qr-delivery-text {
        color: rgba(15, 23, 42, .84) !important;
    }

    html.theme-light .info-modal-overlay,
    html.theme-light .whois-modal-overlay {
        background: rgba(248, 250, 252, .78) !important;
        backdrop-filter: blur(10px);
    }

    html.theme-light .whois-modal-shell {
        background:
            radial-gradient(circle at top, rgba(14, 165, 233, .08), transparent 42%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95)) !important;
        border: 1px solid rgba(148, 163, 184, .22) !important;
        box-shadow:
            0 24px 60px rgba(15, 23, 42, .12),
            inset 0 1px 0 rgba(255, 255, 255, .82) !important;
    }

    html.theme-light .whois-modal-title {
        color: #0f172a !important;
    }

    html.theme-light .whois-modal-subtitle,
    html.theme-light .whois-modal-close {
        color: rgba(71, 85, 105, .72) !important;
    }

    html.theme-light .whois-modal-body {
        background: rgba(255, 255, 255, .82) !important;
        border: 1px solid rgba(148, 163, 184, .2) !important;
        color: rgba(30, 41, 59, .86) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
    }

    html.theme-light .whois-modal-body a {
        color: #0f766e !important;
    }

    html.theme-light .info-modal-shell [x-html] {
        color: #334155;
    }

    html.theme-light .info-modal-shell [x-html] h3,
    html.theme-light .info-modal-shell [x-html] h4,
    html.theme-light .info-modal-shell [x-html] .text-slate-900 {
        color: #0f172a !important;
    }

    html.theme-light .info-modal-shell [x-html] p,
    html.theme-light .info-modal-shell [x-html] div,
    html.theme-light .info-modal-shell [x-html] li,
    html.theme-light .info-modal-shell [x-html] .text-slate-700 {
        color: #334155 !important;
    }

    html.theme-light .info-modal-shell [x-html] .text-slate-500 {
        color: #64748b !important;
    }

    html.theme-light .info-modal-shell [x-html] .bg-slate-50\/80,
    html.theme-light .info-modal-shell [x-html] .bg-slate-50,
    html.theme-light .info-modal-shell [x-html] .dark\:bg-white\/5 {
        background: rgba(248, 250, 252, 0.92) !important;
    }

    html.theme-light .info-modal-shell [x-html] .border-slate-200,
    html.theme-light .info-modal-shell [x-html] .dark\:border-white\/10 {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }

    html.theme-light .info-modal-shell [x-html] .text-emerald-500 {
        color: #16a34a !important;
    }

    html.theme-light .info-modal-shell [x-html] .text-rose-500 {
        color: #e11d48 !important;
    }

    html.theme-light .info-modal-shell [x-html] code {
        color: #0369a1 !important;
        background: rgba(226, 232, 240, 0.7) !important;
    }