html[data-yc-theme="fallback"] {
    background: #071411;
}

html[data-yc-theme="fallback"] body {
    color: #fff6e8;
    background:
        radial-gradient(circle at 18% -8%, rgba(234, 192, 102, 0.26), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(32, 170, 162, 0.2), transparent 33%),
        linear-gradient(180deg, #0b1a16 0%, #071411 58%, #050d0b 100%);
}

html[data-yc-theme="fallback"] body::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 74%);
}

.theme-toggle {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(13, 107, 96, 0.18);
    border-radius: 999px;
    color: #0d6b60;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(17, 32, 29, 0.1);
    backdrop-filter: blur(14px);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

html[data-yc-theme="fallback"] .theme-toggle {
    color: #211505;
    background: linear-gradient(135deg, #ffdf94, #eac066);
    border-color: rgba(234, 192, 102, 0.5);
    box-shadow: 0 12px 26px rgba(234, 192, 102, 0.22);
}

html[data-yc-theme="fallback"] .app-wrapper {
    position: relative;
}

html[data-yc-theme="fallback"] .brand-hero,
html[data-yc-theme="fallback"] .nav-card,
html[data-yc-theme="fallback"] .list-item,
html[data-yc-theme="fallback"] .site-row,
html[data-yc-theme="fallback"] .scan-card,
html[data-yc-theme="fallback"] .browser-mockup,
html[data-yc-theme="fallback"] .header-card,
html[data-yc-theme="fallback"] .guide-header {
    color: #fff6e8;
    background:
        linear-gradient(135deg, rgba(234, 192, 102, 0.12), rgba(32, 170, 162, 0.07)),
        rgba(255, 255, 255, 0.085);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(14px);
}

html[data-yc-theme="fallback"] .brand-hero::before {
    background: linear-gradient(90deg, #eac066, rgba(32, 170, 162, 0.85));
}

html[data-yc-theme="fallback"] .brand-hero::after {
    color: rgba(255, 246, 232, 0.06);
}

html[data-yc-theme="fallback"] .brand-mark,
html[data-yc-theme="fallback"] .platform-icon,
html[data-yc-theme="fallback"] .site-index {
    color: #211505;
    background: linear-gradient(135deg, #ffdf94, #eac066);
    box-shadow: 0 12px 24px rgba(234, 192, 102, 0.22);
}

html[data-yc-theme="fallback"] .brand-mark {
    color: #f9e5a1;
    background: linear-gradient(145deg, #08231f, #123e38 58%, #234f45);
}

html[data-yc-theme="fallback"] .brand-title,
html[data-yc-theme="fallback"] .card-title,
html[data-yc-theme="fallback"] .list-text,
html[data-yc-theme="fallback"] .page-title,
html[data-yc-theme="fallback"] .g-title,
html[data-yc-theme="fallback"] .site-url,
html[data-yc-theme="fallback"] .section-title,
html[data-yc-theme="fallback"] .footer {
    color: #fff6e8;
}

html[data-yc-theme="fallback"] .brand-slogan,
html[data-yc-theme="fallback"] .card-desc,
html[data-yc-theme="fallback"] .page-desc,
html[data-yc-theme="fallback"] .g-desc,
html[data-yc-theme="fallback"] .site-info h3,
html[data-yc-theme="fallback"] .footer,
html[data-yc-theme="fallback"] .list-arrow {
    color: #aebdb4;
}

html[data-yc-theme="fallback"] .notice-bar {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-yc-theme="fallback"] .notice-icon,
html[data-yc-theme="fallback"] .big-btn {
    color: #211505;
    background: linear-gradient(135deg, #ffdf94, #eac066);
    box-shadow: 0 12px 24px rgba(234, 192, 102, 0.18);
}

html[data-yc-theme="fallback"] .marquee-text {
    color: #fff6e8;
}

html[data-yc-theme="fallback"] .section-title::after,
html[data-yc-theme="fallback"] .guide-step:not(:last-child) .g-icon::after,
html[data-yc-theme="fallback"] .desc-divider {
    background: rgba(255, 255, 255, 0.14);
}

html[data-yc-theme="fallback"] .card-icon-box,
html[data-yc-theme="fallback"] .list-icon,
html[data-yc-theme="fallback"] .g-icon,
html[data-yc-theme="fallback"] .tip-num {
    color: #eac066;
    background: rgba(234, 192, 102, 0.12);
    border-color: rgba(234, 192, 102, 0.18);
}

html[data-yc-theme="fallback"] .nav-card:hover,
html[data-yc-theme="fallback"] .list-item:hover,
html[data-yc-theme="fallback"] .site-row:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(234, 192, 102, 0.48);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

html[data-yc-theme="fallback"] .speed-fast {
    color: #06120e;
    background: #72efb5;
}

html[data-yc-theme="fallback"] .speed-medium {
    color: #211505;
    background: #ffd36d;
}

html[data-yc-theme="fallback"] .speed-slow {
    color: #fff5f2;
    background: #e66c61;
}

html[data-yc-theme="fallback"] .speed-checking {
    color: #fff6e8;
    background: rgba(255, 255, 255, 0.1);
}

html[data-yc-theme="fallback"] .qr-box,
html[data-yc-theme="fallback"] .mockup-btn {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-yc-theme="fallback"] .scan-line {
    background: linear-gradient(90deg, transparent, #eac066, transparent);
}

html[data-yc-theme="fallback"] .cursor-dot {
    background: #14110a;
    border-color: #eac066;
    box-shadow:
        0 0 0 5px rgba(234, 192, 102, 0.12),
        0 0 18px rgba(234, 192, 102, 0.42);
    mix-blend-mode: screen;
}

html[data-yc-theme="fallback"] .cursor-outline {
    border-color: rgba(234, 192, 102, 0.48);
    background:
        radial-gradient(circle, rgba(234, 192, 102, 0.12) 0 26%, transparent 28%),
        radial-gradient(circle, rgba(234, 192, 102, 0.16), transparent 68%);
    box-shadow:
        inset 0 0 16px rgba(234, 192, 102, 0.1),
        0 0 26px rgba(234, 192, 102, 0.18);
}

html[data-yc-theme="fallback"] .cursor-outline.hovered {
    background:
        radial-gradient(circle, rgba(234, 192, 102, 0.2) 0 20%, transparent 22%),
        radial-gradient(circle, rgba(234, 192, 102, 0.2), transparent 70%);
    box-shadow:
        inset 0 0 18px rgba(234, 192, 102, 0.12),
        0 0 36px rgba(234, 192, 102, 0.28);
}

html[data-yc-theme="fallback"] .chat-button {
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.24), transparent 28%),
        linear-gradient(135deg, #0d9488 0%, #0f766e 52%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(13, 148, 136, 0.28);
}

@media (max-width: 420px) {
    .theme-toggle {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        bottom: auto;
    }

    .theme-toggle span {
        display: none;
    }
}