:root {
    --sheetgenie-topbar-offset: 82px;
}

body.index-v2-legacy.has-site-topbar-v2 .home-shell {
    padding-top: calc(var(--sheetgenie-topbar-offset, 82px) + 24px + max(0px, var(--ios-safe-top)));
}

body.index-v2-legacy.has-site-topbar-v2 .feedback-chat {
    z-index: 1100;
}

html[data-index-v2-theme] .btn-primary,
html[data-index-v2-theme] .plan-select-btn--monthly,
html[data-index-v2-theme] .plan-select-btn--final {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: var(--button-shadow);
}

html[data-index-v2-theme] .toggle-control:checked + .toggle-ui,
html[data-index-v2-theme] .level-pill.active,
html[data-index-v2-theme] .pricing-card-badge--pro,
html[data-index-v2-theme] .pricing-card-badge--yearly {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

html[data-index-v2-theme] .hero-kicker,
html[data-index-v2-theme] .landing-nav a.is-active,
html[data-index-v2-theme] .landing-nav a:hover,
html[data-index-v2-theme] .modes-showcase-tag,
html[data-index-v2-theme] .index-mode-kicker {
    color: color-mix(in srgb, var(--accent) 68%, #ffffff);
}

html[data-index-v2-theme] .hero-kicker,
html[data-index-v2-theme] .modes-showcase-badge,
html[data-index-v2-theme] .steps-showcase-badge,
html[data-index-v2-theme] .feature-showcase-badge,
html[data-index-v2-theme] .system-update-kicker,
html[data-index-v2-theme] .system-update-status,
html[data-index-v2-theme] .pricing-v2-kicker {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

html[data-index-v2-theme] body.index-v2-legacy {
    background:
        radial-gradient(circle at 12% 18%, var(--index-v2-glow-a), transparent 34%),
        radial-gradient(circle at 86% 82%, var(--index-v2-glow-b), transparent 28%),
        linear-gradient(140deg, var(--bg-primary) 0%, var(--bg-secondary) 46%, var(--bg-tertiary) 100%);
}

html[data-index-v2-theme] .glass-card,
html[data-index-v2-theme] .hero-benefit-card,
html[data-index-v2-theme] .system-update-card,
html[data-index-v2-theme] .feature-showcase,
html[data-index-v2-theme] .modes-showcase,
html[data-index-v2-theme] .steps-showcase,
html[data-index-v2-theme] .pricing-section,
html[data-index-v2-theme] .final-cta-showcase,
html[data-index-v2-theme] .landing-footer {
    border-color: color-mix(in srgb, var(--accent) 24%, rgba(184, 213, 255, 0.16));
}

html[data-index-v2-theme] .feature-showcase,
html[data-index-v2-theme] .system-update-card,
html[data-index-v2-theme] .modes-showcase,
html[data-index-v2-theme] .steps-showcase,
html[data-index-v2-theme] .pricing-section.pricing-v2,
html[data-index-v2-theme] .final-cta-showcase,
html[data-index-v2-theme] .landing-footer,
html[data-index-v2-theme] .feedback-chat-panel {
    background: var(--index-v2-panel-bg);
}

html[data-index-v2-theme] .glass-card,
html[data-index-v2-theme] .hero-benefit-card,
html[data-index-v2-theme] .feature-showcase-card,
html[data-index-v2-theme] .system-update-meta,
html[data-index-v2-theme] .modes-showcase-card,
html[data-index-v2-theme] .steps-showcase-card,
html[data-index-v2-theme] .pricing-card,
html[data-index-v2-theme] .pricing-bottom-cta,
html[data-index-v2-theme] .feedback-chat .feedback-panel,
html[data-index-v2-theme] .feedback-account-strip,
html[data-index-v2-theme] .feedback-history-item,
html[data-index-v2-theme] .feedback-history-empty {
    border-color: color-mix(in srgb, var(--accent) 30%, rgba(184, 213, 255, 0.16));
    background: var(--index-v2-card-bg);
}

html[data-index-v2-theme] .pricing-card--pro,
html[data-index-v2-theme] .pricing-card--yearly,
html[data-index-v2-theme] .modes-showcase-card.is-open {
    border-color: color-mix(in srgb, var(--accent) 42%, rgba(184, 213, 255, 0.22));
    background: var(--index-v2-card-bg-strong);
}

html[data-index-v2-theme] .toggle-item,
html[data-index-v2-theme] .problem-list li,
html[data-index-v2-theme] .input-wrap,
html[data-index-v2-theme] .level-pill,
html[data-index-v2-theme] .pricing-card-badge,
html[data-index-v2-theme] .feedback-field input,
html[data-index-v2-theme] .feedback-field select,
html[data-index-v2-theme] .feedback-field textarea {
    border-color: color-mix(in srgb, var(--accent) 24%, rgba(162, 205, 255, 0.18));
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.08));
}

html[data-index-v2-theme] .pricing-price-box,
html[data-index-v2-theme] .pricing-price-box--pro,
html[data-index-v2-theme] .pricing-price-box--yearly {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-index-v2-theme] .feature-showcase-icon,
html[data-index-v2-theme] .modes-showcase-icon,
html[data-index-v2-theme] .steps-showcase-number,
html[data-index-v2-theme] .hero-benefit-icon,
html[data-index-v2-theme] .btn-rocket,
html[data-index-v2-theme] .plan-btn-icon,
html[data-index-v2-theme] .feedback-chat-toggle {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 68%, var(--accent-2)));
}

html[data-index-v2-theme] .feature-showcase-icon--line {
    color: color-mix(in srgb, var(--bg-primary, #07152c) 88%, #ffffff);
}

html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free,
html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free.glow-on-hover {
    border: 1px solid color-mix(in srgb, var(--accent) 46%, rgba(255, 255, 255, 0.34));
    background: linear-gradient(128deg, color-mix(in srgb, var(--accent) 92%, #ffffff) 0%, var(--accent) 54%, color-mix(in srgb, var(--accent) 78%, var(--accent-2)) 100%);
    box-shadow: 0 22px 46px color-mix(in srgb, var(--accent) 38%, rgba(4, 12, 24, 0.24)), 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free.glow-on-hover::before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--accent) 92%, #ffffff), var(--accent), color-mix(in srgb, var(--accent) 74%, var(--accent-2)), var(--accent));
}

html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free.glow-on-hover::after {
    background: linear-gradient(128deg, color-mix(in srgb, var(--accent) 92%, #ffffff) 0%, var(--accent) 54%, color-mix(in srgb, var(--accent) 78%, var(--accent-2)) 100%);
}

html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free.glow-on-hover:active::after {
    background: linear-gradient(128deg, color-mix(in srgb, var(--accent) 82%, #041024), color-mix(in srgb, var(--accent) 68%, var(--accent-2)));
}

html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free .btn-rocket {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #ffffff), color-mix(in srgb, var(--accent) 72%, var(--accent-2)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 32%, transparent), 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free:hover,
html[data-index-v2-theme] body.index-v2-legacy .hero-cta .btn-primary-free.glow-on-hover:hover {
    box-shadow: 0 26px 56px color-mix(in srgb, var(--accent) 44%, rgba(4, 12, 24, 0.28)), 0 0 28px color-mix(in srgb, var(--accent-2) 28%, transparent);
}

html[data-index-v2-theme] .btn-secondary,
html[data-index-v2-theme] .plan-select-btn,
html[data-index-v2-theme] .feedback-login-btn,
html[data-index-v2-theme] .feedback-submit-btn {
    border-color: color-mix(in srgb, var(--accent) 42%, rgba(184, 213, 255, 0.16));
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, rgba(14, 30, 50, 0.84)), color-mix(in srgb, var(--accent) 62%, var(--accent-2)));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 22%, rgba(4, 12, 24, 0.32));
}

html[data-index-v2-theme] .btn-secondary:hover,
html[data-index-v2-theme] .plan-select-btn:hover,
html[data-index-v2-theme] .feedback-login-btn:hover,
html[data-index-v2-theme] .feedback-submit-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 64%, rgba(184, 213, 255, 0.2));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 18px 34px color-mix(in srgb, var(--accent) 22%, rgba(4, 12, 24, 0.36));
}

html[data-index-v2-theme] .plan-select-btn--free,
html[data-index-v2-theme] .plan-select-btn--ghost {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, rgba(22, 45, 73, 0.7)), color-mix(in srgb, var(--accent-2) 14%, rgba(22, 45, 73, 0.62)));
}

html[data-index-v2-theme] .plan-select-btn--monthly,
html[data-index-v2-theme] .plan-select-btn--yearly,
html[data-index-v2-theme] .plan-select-btn--final {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 64%, var(--accent-2)));
}

html[data-index-v2-theme] body.index-v2-legacy .final-cta-showcase .final-cta-actions .plan-select-btn,
html[data-index-v2-theme] body.index-v2-legacy .final-cta-showcase .final-cta-actions .plan-select-btn--final {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--accent) 54%, rgba(255, 255, 255, 0.32));
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 64%, var(--accent-2)));
    box-shadow: 0 16px 30px color-mix(in srgb, var(--accent) 28%, rgba(4, 18, 36, 0.18));
}

html[data-index-v2-theme] body.index-v2-legacy .final-cta-showcase .final-cta-actions .plan-select-btn:hover,
html[data-index-v2-theme] body.index-v2-legacy .final-cta-showcase .final-cta-actions .plan-select-btn--final:hover {
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #ffffff), color-mix(in srgb, var(--accent) 70%, var(--accent-2)));
    box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 34%, rgba(4, 18, 36, 0.2));
}

html[data-index-v2-theme] .landing-footer-accent {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 56%, transparent), color-mix(in srgb, var(--accent-2) 42%, transparent), transparent);
}

html[data-index-v2-theme] .landing-footer-social-link {
    border-color: color-mix(in srgb, var(--accent) 30%, rgba(184, 213, 255, 0.18));
    background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.08));
}

html[data-index-v2-theme] .landing-footer-social-link:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, rgba(184, 213, 255, 0.22));
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.1)), color-mix(in srgb, var(--accent-2) 20%, rgba(255, 255, 255, 0.08)));
}

html[data-index-v2-theme] .feedback-chat-close {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
    background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.1));
    color: #ffffff;
}

html[data-index-v2-theme] .feedback-chat-close:hover {
    background: color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.14));
}

@media (max-width: 760px) {
    body.index-v2-legacy.has-site-topbar-v2 .home-shell {
        padding-top: calc(var(--sheetgenie-topbar-offset, 74px) + 20px + max(0px, var(--ios-safe-top)));
    }
}