@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

/* Custom Global Styles for Better UX */

/* Add cursor pointer to all buttons and clickable elements */
button:not([disabled]) {
    cursor: pointer;
}

/* Tayapro external library cards */
.tayapro-book-card .product-image-link {
    background:
        radial-gradient(circle at 24% 18%, rgba(20, 184, 166, .18), transparent 34%),
        linear-gradient(135deg, rgba(240,253,250,.95), rgba(255,255,255,.94));
}

.tayapro-book-card .product-image-link::after {
    display: none;
}

.tayapro-book-card .product-type-badge {
    background: linear-gradient(135deg, rgba(15, 118, 110, .95), rgba(8, 145, 178, .94)) !important;
    color: #fff !important;
}

/* MOBILE DASHBOARD POLISH — mobile-only layout layer; desktop remains untouched. */
@media (max-width: 767px) {
    body.vortex-bg-active .dashboard-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    body.vortex-bg-active .dashboard-layout > .dashboard-main,
    body.vortex-bg-active .dashboard-main,
    body.vortex-bg-active .md\:ml-54,
    body.vortex-bg-active .md\:ml-64,
    body.vortex-bg-active .lg\:ml-64 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    body.vortex-bg-active .dashboard-main main {
        padding: .9rem .85rem 1.4rem !important;
        overflow: visible !important;
    }

    body.vortex-bg-active .premium-sidebar-mobile-toggle {
        top: .8rem !important;
        left: .8rem !important;
        z-index: 90 !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        border-radius: 1rem !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 14px 30px rgba(0, 87, 168, .14) !important;
    }

    body.vortex-bg-active .premium-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 85 !important;
        width: min(19rem, 88vw) !important;
        max-width: 88vw !important;
        height: 100dvh !important;
        transform: translateX(-105%) !important;
        transition: transform 260ms ease !important;
        will-change: transform !important;
    }

    body.vortex-bg-active .premium-sidebar.premium-sidebar-open {
        transform: translateX(0) !important;
    }

    body.vortex-bg-active .premium-sidebar.-translate-x-full:not(.premium-sidebar-open) {
        transform: translateX(-105%) !important;
    }

    body.vortex-bg-active .premium-sidebar-overlay {
        z-index: 80 !important;
        background: rgba(5, 20, 35, .46) !important;
        backdrop-filter: blur(6px) !important;
    }

    body.vortex-bg-active .nova-topbar {
        padding: 3.7rem .75rem 0 !important;
    }

    body.vortex-bg-active .nova-topbar__surface {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: .55rem !important;
        min-height: 0 !important;
        border-radius: 1.2rem !important;
        padding: .62rem !important;
        box-shadow: 0 14px 34px rgba(0, 87, 168, .11), inset 0 1px 0 rgba(255, 255, 255, .98) !important;
    }

    body.vortex-bg-active .nova-topbar__identity {
        width: auto !important;
        min-width: 0 !important;
    }

    body.vortex-bg-active .nova-topbar__brand {
        max-width: 100% !important;
        gap: .55rem !important;
        padding: .18rem !important;
    }

    body.vortex-bg-active .nova-topbar__logo {
        width: 2.35rem !important;
        height: 2.35rem !important;
        flex-basis: 2.35rem !important;
        border-radius: .9rem !important;
    }

    body.vortex-bg-active .nova-topbar__logo img {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }

    body.vortex-bg-active .nova-topbar__brand-copy {
        display: flex !important;
        min-width: 0 !important;
    }

    body.vortex-bg-active .nova-topbar__brand-copy strong {
        max-width: 9.5rem !important;
        font-size: .9rem !important;
    }

    body.vortex-bg-active .nova-topbar__brand-copy small {
        font-size: .62rem !important;
        letter-spacing: .08em !important;
    }

    body.vortex-bg-active .nova-topbar__actions {
        gap: .42rem !important;
        justify-self: end !important;
    }

    body.vortex-bg-active .nova-action {
        width: 2.38rem !important;
        height: 2.38rem !important;
        flex-basis: 2.38rem !important;
        border-radius: .85rem !important;
    }

    body.vortex-bg-active .nova-action svg {
        width: 1.05rem !important;
        height: 1.05rem !important;
    }

    body.vortex-bg-active .nova-profile,
    body.vortex-bg-active .nova-topbar__divider {
        display: none !important;
    }

    body.vortex-bg-active .nova-search {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        height: 2.55rem !important;
        margin-top: .1rem !important;
        gap: .5rem !important;
        border-radius: .95rem !important;
        padding: .2rem .25rem .2rem .72rem !important;
    }

    body.vortex-bg-active .nova-search input.nova-search__input[type="text"],
    body.vortex-bg-active .nova-search__input {
        height: 2.1rem !important;
        font-size: .84rem !important;
    }

    body.vortex-bg-active .nova-search__hint {
        display: none !important;
    }

    body.vortex-bg-active .nova-search button.nova-search__submit[type="submit"],
    body.vortex-bg-active .nova-search__submit {
        width: 2.1rem !important;
        height: 2.1rem !important;
        min-width: 2.1rem !important;
        border-radius: .76rem !important;
        padding: .55rem !important;
    }

    body.vortex-bg-active .dashboard-main main > .mb-6.relative,
    body.vortex-bg-active .dashboard-main main > .mb-6.relative.z-\[120\] {
        z-index: 20 !important;
        margin-bottom: 1rem !important;
    }

    body.vortex-bg-active .dashboard-main section {
        margin-bottom: 1.65rem !important;
    }

    body.vortex-bg-active .dashboard-main section > .flex:first-child {
        align-items: flex-start !important;
        gap: .72rem !important;
    }

    body.vortex-bg-active .dashboard-main section h2 {
        font-size: clamp(1.35rem, 6.4vw, 1.8rem) !important;
        line-height: 1.08 !important;
    }

    body.vortex-bg-active .dashboard-main section p {
        font-size: .86rem !important;
        line-height: 1.5 !important;
    }

    body.vortex-bg-active .dashboard-main .grid,
    body.vortex-bg-active .dashboard-main .product-grid,
    body.vortex-bg-active .dashboard-main .product-grid-marketplace {
        grid-template-columns: 1fr !important;
        gap: .95rem !important;
    }

    body.vortex-bg-active .dashboard-main .product-card,
    body.vortex-bg-active .dashboard-main .product-card-premium,
    body.vortex-bg-active .dashboard-main article[data-recommendation-card] {
        width: 100% !important;
        max-width: 28rem !important;
        margin-right: auto !important;
        margin-left: auto !important;
        border-radius: 1.18rem !important;
    }

    body.vortex-bg-active .dashboard-main .product-image-link,
    body.vortex-bg-active .dashboard-main .product-card > a:first-child,
    body.vortex-bg-active .dashboard-main .product-card-premium > a:first-child,
    body.vortex-bg-active .dashboard-main article[data-recommendation-card] > a:first-of-type {
        min-height: 9.35rem !important;
        height: 9.35rem !important;
    }

    body.vortex-bg-active .dashboard-main .product-image,
    body.vortex-bg-active .dashboard-main .product-card img,
    body.vortex-bg-active .dashboard-main .product-card-premium img,
    body.vortex-bg-active .dashboard-main article[data-recommendation-card] img {
        height: 9.35rem !important;
    }

    body.vortex-bg-active .dashboard-main .product-card .p-4,
    body.vortex-bg-active .dashboard-main .product-card .p-5,
    body.vortex-bg-active .dashboard-main .product-card-premium .p-4,
    body.vortex-bg-active .dashboard-main .product-card-premium .p-5,
    body.vortex-bg-active .dashboard-main article[data-recommendation-card] > div:last-child {
        padding: .9rem !important;
    }
}

@media (max-width: 390px) {
    body.vortex-bg-active .nova-topbar__brand-copy {
        display: none !important;
    }

    body.vortex-bg-active .nova-topbar__identity {
        width: 2.35rem !important;
    }
}

.tayapro-book-card .product-subtype {
    color: #0f766e !important;
}

.tayapro-book-cover-fallback {
    min-height: 12rem;
}

.tayapro-book-card .card-primary-action {
    background: linear-gradient(135deg, #0f766e, #0057a8) !important;
}

.tayapro-book-card .product-image-link::after {
    content: none !important;
    display: none !important;
}

.tayapro-book-cover-fallback > svg {
    width: 4rem !important;
    height: 4rem !important;
    color: #0f766e !important;
}

.tayapro-book-card .product-trust-row svg,
.tayapro-book-card .card-primary-action svg {
    flex: 0 0 auto !important;
}

.tayapro-book-card .product-trust-row svg {
    width: .95rem !important;
    height: .95rem !important;
}

.tayapro-book-card .card-primary-action svg {
    width: 1rem !important;
    height: 1rem !important;
}

.tayapro-book-cover-fallback > svg {
    width: 4rem;
    height: 4rem;
    color: #0f766e;
    filter: drop-shadow(0 12px 18px rgba(15, 118, 110, .18));
}

.tayapro-book-card .product-trust-row svg {
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
}

.tayapro-book-card .card-primary-action svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

button[disabled] {
    cursor: not-allowed;
}

/* Ensure links styled as buttons also get pointer cursor */
a[role="button"],
a.button,
[onclick]:not(button):not(a) {
    cursor: pointer;
}

/* Label elements acting as file upload triggers */
label[for] {
    cursor: pointer;
}

/* Select dropdowns */
select {
    cursor: pointer;
}

/* Checkbox and radio inputs */
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

html {
    scroll-behavior: smooth;
}

body.menu-open {
    overflow: hidden;
}

.premium-page {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.18), transparent 32rem),
        radial-gradient(circle at 92% 12%, rgba(14, 165, 233, 0.16), transparent 34rem),
        linear-gradient(180deg, #f8fffd 0%, #f4fbfa 45%, #ffffff 100%);
}

.ambient-blob {
    position: fixed;
    z-index: -1;
    border-radius: 9999px;
    filter: blur(64px);
    opacity: 0.55;
    pointer-events: none;
    animation: ambientFloat 12s ease-in-out infinite alternate;
}

.ambient-blob-one {
    width: 22rem;
    height: 22rem;
    top: 7rem;
    left: -8rem;
    background: rgba(20, 184, 166, 0.35);
}

.ambient-blob-two {
    width: 26rem;
    height: 26rem;
    right: -10rem;
    top: 16rem;
    background: rgba(125, 211, 252, 0.32);
    animation-delay: -4s;
}

@keyframes ambientFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(2rem, -1rem, 0) scale(1.08);
    }
}

.premium-nav {
    box-shadow: 0 18px 60px rgba(15, 118, 110, 0.06);
}

.premium-link {
    position: relative;
    transition: color 180ms ease;
}

.premium-link::after {
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    height: 2px;
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    border-radius: 9999px;
    background: linear-gradient(90deg, #14b8a6, #0f766e);
    transition: transform 180ms ease;
}

.premium-link:hover {
    color: #0f3f3a;
}

.premium-link:hover::after {
    transform: scaleX(1);
}

.premium-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 9999px;
    font-weight: 800;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.premium-button:hover {
    transform: translateY(-2px);
}

.premium-button:focus-visible,
.category-shortcut:focus-visible,
.product-image-link:focus-visible,
.view-all-link:focus-visible,
.card-primary-action:focus-visible,
.card-secondary-action:focus-visible,
.card-icon-action:focus-visible,
.chatbot-toggle:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 3px;
}

.premium-button-primary {
    background: linear-gradient(135deg, #0f3f3a, #062421);
    color: #fff;
    box-shadow: 0 18px 36px rgba(15, 63, 58, 0.22);
    padding: 0.7rem 1.35rem;
}

.premium-button-primary:hover {
    box-shadow: 0 24px 44px rgba(15, 63, 58, 0.28);
}

.premium-button-secondary {
    border: 1px solid rgba(15, 63, 58, 0.12);
    background: rgba(255, 255, 255, 0.78);
    color: #0f3f3a;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
    padding: 0.7rem 1.25rem;
}

.premium-button-secondary:hover {
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 118, 110, 0.12);
}

.hero-title {
    font-size: clamp(3.25rem, 7vw, 5.6rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.hero-copy {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 600;
    line-height: 1.65;
}

.mobile-nav-link {
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.mobile-nav-link:hover {
    transform: translateX(-2px);
    background: #f0fdfa;
    color: #0f766e;
}

.glass-panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58));
    backdrop-filter: blur(22px);
}

.hero-orbit {
    animation: pulseGlow 5s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    from {
        opacity: 0.55;
        transform: scale(0.96);
    }
    to {
        opacity: 0.95;
        transform: scale(1.04);
    }
}

.floating-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.9rem;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.9rem;
    box-shadow: 0 22px 42px rgba(2, 44, 34, 0.16);
    animation: cardFloat 4.5s ease-in-out infinite alternate;
}

.floating-card:nth-child(2) {
    animation-delay: -1.2s;
}

.floating-card:nth-child(3) {
    animation-delay: -2.3s;
}

.floating-card:nth-child(4) {
    animation-delay: -3.1s;
}

.floating-card strong {
    color: #0f766e;
    font-size: 0.95rem;
}

@keyframes cardFloat {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-0.55rem);
    }
}

.card-icon,
.category-shortcut-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 1rem;
}

.card-icon {
    width: 2.8rem;
    height: 2.8rem;
}

.stat-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 5.25rem;
    border: 1px solid rgba(15, 118, 110, 0.1);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.76);
    padding: 1rem;
    box-shadow: 0 16px 32px rgba(15, 118, 110, 0.08);
    backdrop-filter: blur(18px);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.stat-chip:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: 0 22px 42px rgba(15, 118, 110, 0.13);
}

.stat-chip span {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
    color: #0f3f3a;
}

.stat-chip small {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.category-shortcut {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 1.45rem;
    padding: 1rem;
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.category-shortcut:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 118, 110, 0.1);
}

.category-shortcut-icon {
    width: 3rem;
    height: 3rem;
}

.category-shortcut strong,
.category-shortcut small {
    display: block;
}

.category-shortcut strong {
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
}

.category-shortcut small {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
}

.section-kicker {
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0f766e;
}

.section-title {
    max-width: 46rem;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: #0f172a;
}

.section-subtitle {
    margin-top: 0.85rem;
    max-width: 42rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.7;
    color: #64748b;
}

.benefit-card,
.product-card,
.empty-state {
    border: 1px solid rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 20px 44px rgba(15, 118, 110, 0.08);
    backdrop-filter: blur(20px);
}

.benefit-card {
    border-radius: 2rem;
    padding: 1.5rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 54px rgba(15, 118, 110, 0.13);
}

.benefit-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #ccfbf1, #e0f2fe);
    color: #0f766e;
}

.benefit-card h3 {
    margin-top: 1.2rem;
    font-size: 1.22rem;
    font-weight: 900;
    color: #0f172a;
}

.benefit-card p {
    margin-top: 0.6rem;
    font-weight: 600;
    line-height: 1.65;
    color: #64748b;
}

.product-section {
    scroll-margin-top: 6rem;
}

.section-heading {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.8rem;
}

.count-badge {
    border-radius: 9999px;
    background: #ecfeff;
    padding: 0.62rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 900;
    color: #0f766e;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 9999px;
    background: #0f3f3a;
    padding: 0.72rem 1rem;
    font-size: 0.88rem;
    font-weight: 900;
    color: #fff;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.view-all-link:hover {
    transform: translateY(-2px);
    background: #0f766e;
    box-shadow: 0 18px 32px rgba(15, 118, 110, 0.2);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
}

.product-grid-marketplace {
    margin-top: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.product-card {
    overflow: hidden;
    border-radius: 2rem;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.product-card-premium {
    position: relative;
    display: flex;
    min-height: 100%;
    cursor: pointer;
    flex-direction: column;
    border: 1px solid rgba(15, 118, 110, 0.12);
    background:
        radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    isolation: isolate;
}

.product-card-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.product-card-premium:focus-visible {
    outline: 3px solid rgba(20, 184, 166, 0.42);
    outline-offset: 4px;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 118, 110, 0.18);
    box-shadow: 0 30px 60px rgba(15, 118, 110, 0.15);
}

.product-image-link {
    position: relative;
    display: block;
    height: 13.5rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 20%, rgba(16, 185, 129, 0.22), transparent 28%),
        linear-gradient(135deg, #ecfeff, #f0fdfa 52%, #fff7ed);
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease;
}

.product-card:hover .product-image {
    transform: scale(1.06);
}

.product-card-shine {
    position: absolute;
    inset: auto -30% 0 -30%;
    height: 48%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.74));
    transform: translateY(18%);
    transition: transform 240ms ease, opacity 240ms ease;
}

.product-card:hover .product-card-shine {
    opacity: 0.92;
    transform: translateY(0);
}

.product-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.product-placeholder-service {
    background: linear-gradient(135deg, #d1fae5, #ccfbf1);
    color: #047857;
}

.product-placeholder-book {
    background: linear-gradient(135deg, #cffafe, #dbeafe);
    color: #0369a1;
}

.product-placeholder-webinar {
    background: linear-gradient(135deg, #ede9fe, #e0f2fe);
    color: #6d28d9;
}

.product-placeholder-course {
    background: linear-gradient(135deg, #fef3c7, #ccfbf1);
    color: #b45309;
}

.product-type-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.88);
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 900;
    color: #0f3f3a;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
}

.product-save-button {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    display: inline-flex;
    width: 2.65rem;
    height: 2.65rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    color: #e11d48;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.product-save-button:hover {
    transform: translateY(-2px) scale(1.03);
    background: #fff1f2;
    box-shadow: 0 18px 34px rgba(225, 29, 72, 0.18);
}

.product-save-button[data-saved="true"],
.product-save-button.is-saved,
.product-detail-action[data-saved="true"],
.product-detail-action.is-saved {
    border-color: rgba(225, 29, 72, 0.22) !important;
    background: linear-gradient(135deg, #fff1f2, #ffffff) !important;
    color: #e11d48 !important;
    box-shadow: 0 18px 36px rgba(225, 29, 72, 0.18) !important;
}

.product-save-button[data-saved="true"] [data-wishlist-icon],
.product-save-button.is-saved [data-wishlist-icon],
.product-detail-action[data-saved="true"] [data-wishlist-icon],
.product-detail-action.is-saved [data-wishlist-icon] {
    fill: currentColor !important;
    color: #e11d48 !important;
    animation: wishlistHeartPop 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-save-button.is-loading,
.product-detail-action.is-loading {
    opacity: 0.68;
    pointer-events: none;
}

@keyframes wishlistHeartPop {
    0% { transform: scale(0.82); }
    55% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.15rem;
}

.product-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.product-subtype {
    display: inline-flex;
    max-width: 68%;
    align-items: center;
    border-radius: 9999px;
    background: #ecfeff;
    padding: 0.42rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    color: #155e75;
}

.product-title {
    display: -webkit-box;
    min-height: 3rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.35;
    color: #0f172a;
}

.product-card:hover .product-title {
    color: #0f766e;
}

.product-description {
    margin-top: 0.65rem;
    display: -webkit-box;
    min-height: 2.55rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.45;
    color: #64748b;
}

.product-price {
    flex: 0 0 auto;
    border-radius: 9999px;
    background: #f0fdfa;
    padding: 0.42rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 900;
    color: #0f766e;
}

.product-meta {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #64748b;
}

.product-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 9999px;
    background: #f8fafc;
    padding: 0.35rem 0.55rem;
}

.product-rating {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    font-weight: 900;
    color: #334155;
}

.stars {
    display: inline-flex;
    gap: 0.15rem;
    color: #f59e0b;
}

.product-rating small {
    color: #94a3b8;
    font-size: 0.75rem;
}

.star-muted {
    color: #cbd5e1;
}

.product-actions {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    gap: 0.65rem;
}

.product-trust-row {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.product-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 9999px;
    background: rgba(240, 253, 250, 0.86);
    padding: 0.4rem 0.58rem;
    font-size: 0.74rem;
    font-weight: 900;
    color: #0f766e;
}

.card-primary-action,
.card-secondary-action,
.card-icon-action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 900;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.card-primary-action,
.card-secondary-action {
    flex: 1;
}

.card-primary-action {
    gap: 0.45rem;
    background: linear-gradient(135deg, #0f3f3a, #0f766e);
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.18);
}

.card-secondary-action {
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: #fff;
    color: #0f3f3a;
}

.card-icon-action {
    width: 2.75rem;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: #f0fdfa;
    color: #0f766e;
}

.card-primary-action:hover,
.card-secondary-action:hover,
.card-icon-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.14);
}

.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden {
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(15, 118, 110, 0.11);
    border-radius: 1.75rem !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.97)) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden:hover,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 118, 110, 0.2);
    box-shadow: 0 30px 60px rgba(15, 118, 110, 0.14) !important;
}

.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden > a:first-child,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden > a:first-child {
    position: relative;
    background:
        radial-gradient(circle at 70% 20%, rgba(16, 185, 129, 0.2), transparent 28%),
        linear-gradient(135deg, #ecfeff, #f0fdfa 52%, #fff7ed) !important;
}

.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden img,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden img {
    transition: transform 260ms ease;
}

.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden:hover img,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden:hover img {
    transform: scale(1.06);
}

.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden h3,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden h3 {
    font-weight: 900 !important;
    color: #0f172a;
    transition: color 180ms ease;
}

.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden:hover h3,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden:hover h3 {
    color: #0f766e;
}

.empty-state {
    grid-column: 1 / -1;
    display: flex;
    min-height: 19rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    padding: 2rem;
    text-align: center;
}

.empty-illustration {
    display: flex;
    width: 5.5rem;
    height: 5.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    background: linear-gradient(135deg, #ccfbf1, #e0f2fe);
    color: #0f766e;
    font-size: 2rem;
    box-shadow: 0 18px 38px rgba(15, 118, 110, 0.14);
}

.empty-state h3 {
    margin-top: 1.3rem;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.empty-state p {
    margin: 0.55rem 0 1.2rem;
    max-width: 28rem;
    font-weight: 600;
    line-height: 1.6;
    color: #64748b;
}

.social-link {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #f8fafc;
    transition: transform 180ms ease, background-color 180ms ease;
}

.social-link:hover {
    transform: translateY(-2px);
    background: #ecfeff;
}

.chatbot-toggle {
    position: fixed;
    right: calc(1.25rem + env(safe-area-inset-right));
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #0f3f3a, #062421);
    color: #fff;
    box-shadow: 0 22px 44px rgba(15, 63, 58, 0.28);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.chatbot-toggle:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 28px 54px rgba(15, 63, 58, 0.34);
}

.chatbot-widget {
    position: fixed;
    right: calc(1.25rem + env(safe-area-inset-right));
    bottom: calc(6.5rem + env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    width: min(24rem, calc(100vw - 2rem));
    height: min(34rem, calc(100vh - 8rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

.chatbot-widget.hidden {
    display: none;
}

.chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0f3f3a, #062421);
    color: #fff;
    padding: 1rem;
}

.chatbot-messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    background: linear-gradient(180deg, #f8fafc, #f0fdfa);
    padding: 1rem;
}

.chat-avatar {
    display: flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    color: #fff;
}

.chat-avatar-ai {
    background: #0f766e;
}

.chat-avatar-user {
    background: #334155;
}

.chat-bubble {
    max-width: 82%;
    border-radius: 1rem;
    padding: 0.78rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.chat-bubble-ai {
    background: #fff;
    color: #334155;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.chat-bubble-user {
    background: #0f3f3a;
    color: #fff;
}

.chat-bubble a,
.ai-response a {
    color: #0f766e;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.chat-bubble-user a {
    color: #ccfbf1;
}

.typing-dots {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.typing-dots span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: #94a3b8;
    animation: typingPulse 900ms ease-in-out infinite alternate;
}

.typing-dots span:nth-child(2) {
    animation-delay: 120ms;
}

.typing-dots span:nth-child(3) {
    animation-delay: 240ms;
}

@keyframes typingPulse {
    from {
        opacity: 0.45;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-0.2rem);
    }
}

@media (min-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .chatbot-toggle {
        right: calc(0.85rem + env(safe-area-inset-right));
        bottom: calc(4.75rem + env(safe-area-inset-bottom));
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 1.25rem;
    }

    .chatbot-widget {
        right: calc(0.75rem + env(safe-area-inset-right));
        bottom: calc(9rem + env(safe-area-inset-bottom));
        width: min(23rem, calc(100vw - 1.5rem));
        height: min(30rem, calc(100vh - 10.5rem));
    }

    .floating-card {
        transform: none !important;
    }
}

/* Cart add-ons: use the same premium product-card language as dashboards, just denser. */
.product-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
    gap: 1rem;
}

.product-grid-compact .product-card {
    min-height: auto;
}

.product-grid-compact .product-image-link {
    min-height: 8.75rem;
}

.product-grid-compact .product-image,
.product-grid-compact .product-placeholder {
    height: 8.75rem !important;
}

.product-grid-compact .product-body {
    padding: .9rem !important;
}

.product-grid-compact .product-description {
    display: none;
}

/* Privacy Policy page */
.privacy-policy-page {
    overflow-x: hidden;
}

.privacy-page-shell {
    min-height: 100dvh;
    padding: clamp(.8rem, 1.6vw, 1.25rem);
}

.privacy-nav {
    position: sticky;
    top: .8rem;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(0, 87, 168, .10);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .86);
    padding: .8rem;
    box-shadow: 0 18px 42px rgba(0, 87, 168, .09);
    backdrop-filter: blur(18px);
}

.privacy-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #0f172a;
    text-decoration: none;
}

.privacy-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0057a8, #0084ff);
    box-shadow: 0 12px 26px rgba(0, 87, 168, .18);
}

.privacy-brand-mark img {
    width: 1.55rem;
    height: 1.55rem;
}

.privacy-brand strong {
    display: block;
    font-size: .86rem;
    font-weight: 780;
    letter-spacing: .14em;
}

.privacy-brand small {
    display: block;
    color: #0084ff;
    font-size: .68rem;
    font-weight: 720;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.privacy-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.privacy-nav-links a {
    border-radius: 999px;
    color: #475569;
    font-size: .82rem;
    font-weight: 680;
    padding: .65rem .9rem;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.privacy-nav-links a:hover {
    background: #edf7ff;
    color: #0057a8;
    transform: translateY(-1px);
}

.privacy-nav-links .privacy-nav-cta {
    background: linear-gradient(135deg, #0057a8, #0084ff);
    color: #fff;
    box-shadow: 0 12px 24px rgba(0, 132, 255, .18);
}

.privacy-main {
    width: min(100%, 76rem);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4.5rem) 0 3rem;
}

.privacy-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 87, 168, .10);
    border-radius: clamp(1.75rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 132, 255, .18), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(16, 185, 129, .13), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,250,255,.94));
    padding: clamp(1.5rem, 5vw, 4rem);
    box-shadow: 0 28px 70px rgba(0, 87, 168, .10);
}

.privacy-eyebrow {
    display: inline-flex;
    border-radius: 999px;
    background: #edf7ff;
    color: #0057a8;
    font-size: .72rem;
    font-weight: 820;
    letter-spacing: .18em;
    padding: .55rem .85rem;
    text-transform: uppercase;
}

.privacy-hero h1 {
    max-width: 13ch;
    margin: 1rem 0 0;
    color: #07182d;
    font-size: clamp(2.35rem, 7vw, 5.2rem);
    font-weight: 680;
    letter-spacing: -.07em;
    line-height: .94;
}

.privacy-hero > p:not(.privacy-eyebrow) {
    max-width: 48rem;
    margin-top: 1.15rem;
    color: #526173;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    font-weight: 460;
    line-height: 1.75;
}

.privacy-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
}

.privacy-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(0, 87, 168, .09);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: #315b7a;
    font-size: .82rem;
    font-weight: 700;
    padding: .7rem .9rem;
}

.privacy-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.privacy-summary-grid article,
.privacy-policy-card,
.privacy-toc {
    border: 1px solid rgba(0, 87, 168, .10);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 42px rgba(0, 87, 168, .07);
    backdrop-filter: blur(16px);
}

.privacy-summary-grid article {
    border-radius: 1.5rem;
    padding: 1.2rem;
}

.privacy-summary-grid i {
    color: #0084ff;
    font-size: 1.35rem;
}

.privacy-summary-grid h2 {
    margin: .8rem 0 .35rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 740;
}

.privacy-summary-grid p {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    font-weight: 480;
    line-height: 1.55;
}

.privacy-content-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.privacy-toc {
    position: sticky;
    top: 6.5rem;
    display: grid;
    gap: .25rem;
    border-radius: 1.35rem;
    padding: 1rem;
}

.privacy-toc strong {
    color: #0f172a;
    font-size: .86rem;
    font-weight: 760;
    margin-bottom: .35rem;
}

.privacy-toc a {
    border-radius: .9rem;
    color: #64748b;
    font-size: .84rem;
    font-weight: 620;
    padding: .65rem .75rem;
    text-decoration: none;
}

.privacy-toc a:hover {
    background: #edf7ff;
    color: #0057a8;
}

.privacy-policy-card {
    border-radius: 1.75rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.privacy-policy-card section + section {
    border-top: 1px solid rgba(0, 87, 168, .08);
    margin-top: 2rem;
    padding-top: 2rem;
}

.privacy-policy-card h2 {
    color: #07182d;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 680;
    letter-spacing: -.04em;
}

.privacy-policy-card p,
.privacy-policy-card li {
    color: #526173;
    font-size: .98rem;
    font-weight: 460;
    line-height: 1.75;
}

.privacy-policy-card ul {
    display: grid;
    gap: .65rem;
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.privacy-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

.privacy-action-row a,
.privacy-contact-box a {
    color: #0057a8;
    font-weight: 740;
}

.privacy-action-row a {
    border: 1px solid rgba(0, 87, 168, .12);
    border-radius: 999px;
    background: #edf7ff;
    padding: .75rem 1rem;
    text-decoration: none;
}

.privacy-contact-box {
    display: grid;
    gap: .55rem;
    border-radius: 1.25rem;
    background: #f7fbff;
    margin-top: 1rem;
    padding: 1rem;
}

/* Floating chatbot: fixed, visible, above all background layers. */
button#chatbotToggle.chatbot-toggle {
    position: fixed !important;
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
    z-index: 9998 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 4rem !important;
    height: 4rem !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: 1.45rem !important;
    background: linear-gradient(135deg, #0057a8, #0084ff) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 20px 42px rgba(0, 87, 168, .28), inset 0 1px 0 rgba(255,255,255,.28) !important;
    pointer-events: auto !important;
}

button#chatbotToggle.chatbot-toggle:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

div#chatbotWidget.chatbot-widget {
    position: fixed !important;
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 5.1rem) !important;
    z-index: 9997 !important;
    width: min(24rem, calc(100vw - 2rem)) !important;
    max-height: min(39rem, calc(100dvh - 7rem)) !important;
    overflow: hidden !important;
}

div#chatbotWidget.chatbot-widget:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
}

.chat-bubble a,
.ai-response a {
    color: #0057a8;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.chat-bubble-user a {
    color: #ffffff;
}

.chat-bubble a:hover,
.ai-response a:hover {
    color: #0084ff;
}

@media (max-width: 900px) {
    .privacy-summary-grid,
    .privacy-content-layout {
        grid-template-columns: 1fr;
    }

    .privacy-toc {
        position: static;
    }

    .privacy-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .privacy-nav-links {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .privacy-page-shell {
        margin-left: 0 !important;
        padding-top: 4.75rem;
    }

    button#chatbotToggle.chatbot-toggle {
        right: .9rem !important;
        bottom: .9rem !important;
        width: 3.55rem !important;
        height: 3.55rem !important;
        border-radius: 1.2rem !important;
    }

    div#chatbotWidget.chatbot-widget {
        right: .65rem !important;
        bottom: 4.95rem !important;
        width: calc(100vw - 1.3rem) !important;
        max-height: calc(100dvh - 6rem) !important;
    }
}

/* ABSOLUTE EOF: Tayapro external cards must win over legacy card overrides. */
.tayapro-book-card .product-image-link {
    background:
        radial-gradient(circle at 24% 18%, rgba(20, 184, 166, .18), transparent 34%),
        linear-gradient(135deg, rgba(240,253,250,.95), rgba(255,255,255,.94)) !important;
}

.tayapro-book-card .product-type-badge {
    background: linear-gradient(135deg, rgba(15, 118, 110, .95), rgba(8, 145, 178, .94)) !important;
    color: #fff !important;
}

.tayapro-book-card .card-primary-action {
    background: linear-gradient(135deg, #0f766e, #0057a8) !important;
}

.tayapro-book-card .product-image-link::after {
    content: none !important;
    display: none !important;
}

.tayapro-book-cover-fallback > svg {
    width: 4rem !important;
    height: 4rem !important;
    color: #0f766e !important;
}

.tayapro-book-card .product-trust-row svg,
.tayapro-book-card .card-primary-action svg {
    flex: 0 0 auto !important;
}

.tayapro-book-card .product-trust-row svg {
    width: .95rem !important;
    height: .95rem !important;
}

.tayapro-book-card .card-primary-action svg {
    width: 1rem !important;
    height: 1rem !important;
}

.tayapro-book-card .product-image-link::after {
    display: none !important;
}

.tayapro-book-cover-fallback > svg {
    width: 4rem !important;
    height: 4rem !important;
}

.tayapro-book-card .product-trust-row svg {
    width: .95rem !important;
    height: .95rem !important;
}

.tayapro-book-card .card-primary-action svg {
    width: 1rem !important;
    height: 1rem !important;
}

/* TRUE EOF: Tayapro external library cards */
.tayapro-book-card .product-image-link {
    background:
        radial-gradient(circle at 24% 18%, rgba(20, 184, 166, .18), transparent 34%),
        linear-gradient(135deg, rgba(240,253,250,.95), rgba(255,255,255,.94)) !important;
}

.tayapro-book-card .product-image-link::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(236,254,255,.9));
    box-shadow: 0 14px 32px rgba(15, 118, 110, .18);
    opacity: .94;
}

.tayapro-book-card .product-type-badge {
    background: linear-gradient(135deg, rgba(15, 118, 110, .95), rgba(8, 145, 178, .94)) !important;
    color: #fff !important;
}

.tayapro-book-card .product-subtype {
    color: #0f766e !important;
}

.tayapro-book-cover-fallback {
    min-height: 12rem !important;
}

.tayapro-book-card .card-primary-action {
    background: linear-gradient(135deg, #0f766e, #0057a8) !important;
}

/* Final UI fixes — page-scoped overrides to avoid old retrofit collisions. */
.website-card-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.add-to-cart-btn.is-loading,
button.card-icon-action.is-loading {
    cursor: wait;
    opacity: .68;
}

.ai-support-page .dashboard-layout {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.ai-support-page .dashboard-main {
    width: calc(100vw - 18rem) !important;
    max-width: calc(100vw - 18rem) !important;
    min-width: 0;
    background:
        radial-gradient(circle at 8% 8%, rgba(0,132,255,.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,251,255,.96)) !important;
}

.ai-support-header {
    border-bottom: 1px solid rgba(0, 87, 168, .09);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(18px);
}

.ai-support-composer-wrap {
    border-top: 1px solid rgba(0, 87, 168, .08);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(18px);
}

.ai-chat-composer {
    border: 1px solid rgba(0, 132, 255, .10);
    border-radius: 1.35rem;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(0, 87, 168, .09), inset 0 1px 0 #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ai-chat-composer:focus-within {
    border-color: rgba(0, 132, 255, .28);
    box-shadow: 0 22px 48px rgba(0, 87, 168, .12), 0 0 0 4px rgba(0, 132, 255, .08), inset 0 1px 0 #fff;
    transform: translateY(-1px);
}

body.vortex-bg-active .ai-chat-composer input.ai-chat-input[type="text"],
.ai-chat-input {
    min-height: 2.65rem !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 .25rem !important;
}

.ai-chat-send {
    background: linear-gradient(135deg, #0057a8, #0084ff) !important;
    box-shadow: 0 12px 24px rgba(0,132,255,.24) !important;
}

.product-form-page {
    min-height: 100dvh;
    overflow-x: hidden;
}

.product-form-page .main-content-wrapper {
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
}

.product-form-page .content-area {
    min-width: 0;
    background: rgba(255,255,255,.74);
}

@media (min-width: 768px) {
    .product-form-page .main-content-wrapper > .flex > .content-area {
        width: calc(100vw - 18rem) !important;
        max-width: calc(100vw - 18rem) !important;
        margin-left: 18rem !important;
    }
}

@media (max-width: 767px) {
    .ai-support-page .dashboard-main,
    .product-form-page .main-content-wrapper > .flex > .content-area {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .ai-support-page .dashboard-main {
        padding-top: 4rem;
    }
}

/* Reliable inline icon system. Replaces remote icon-font glyphs site-wide. */
.premium-icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    overflow: visible;
    vertical-align: -0.14em;
}

.premium-icon-spin {
    animation: premium-icon-rotate 0.85s linear infinite;
}

.premium-sidebar-icon svg,
.premium-sidebar-mobile-toggle svg,
.premium-sidebar-cta svg,
.premium-sidebar-logout svg {
    width: 1.12rem;
    height: 1.12rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes premium-icon-rotate {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-icon-spin {
        animation-duration: 1.8s;
    }
}

/* Dashboard marketplace cards — compact, premium, and conversion-focused. */
body.vortex-bg-active .dashboard-product-grid {
    gap: 1.1rem !important;
    margin-bottom: 2.75rem;
}

body.vortex-bg-active .dashboard-product-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.085) !important;
    border-radius: 1.15rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98)) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 12px 28px rgba(15, 23, 42, 0.07) !important;
    transform: translateY(0);
    transition:
        transform 240ms cubic-bezier(.2, .8, .2, 1),
        border-color 240ms ease,
        box-shadow 240ms ease !important;
}

body.vortex-bg-active .dashboard-product-card::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 87, 168, 0.06), transparent 42%, rgba(14, 165, 233, 0.05));
    content: "";
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
}

body.vortex-bg-active .dashboard-product-card:hover {
    border-color: rgba(0, 87, 168, 0.24) !important;
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.04),
        0 22px 44px rgba(0, 87, 168, 0.13) !important;
    transform: translateY(-5px);
}

body.vortex-bg-active .dashboard-product-card:hover::after {
    opacity: 1;
}

body.vortex-bg-active .dashboard-product-card > a:first-child {
    position: relative;
    height: 10.75rem !important;
    min-height: 10.75rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 15%, rgba(56, 189, 248, 0.24), transparent 34%),
        linear-gradient(145deg, #edf7ff, #f7fbff 58%, #ebf5ff);
}

body.vortex-bg-active .dashboard-product-card > a:first-child::after {
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(8, 47, 73, 0.16));
    content: "";
    pointer-events: none;
}

body.vortex-bg-active .dashboard-product-card > a:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 500ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease;
}

body.vortex-bg-active .dashboard-product-card:hover > a:first-child img {
    filter: saturate(1.06) contrast(1.02);
    transform: scale(1.055);
}

body.vortex-bg-active .dashboard-product-card > a:first-child > div {
    height: 100%;
    background: transparent !important;
    color: #2774b8 !important;
}

body.vortex-bg-active .dashboard-product-card > a:first-child > div svg {
    width: 3rem !important;
    height: 3rem !important;
    padding: 0.72rem;
    border: 1px solid rgba(0, 87, 168, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    color: #0057a8 !important;
    box-shadow: 0 12px 28px rgba(0, 87, 168, 0.1);
}

body.vortex-bg-active .dashboard-product-card > .p-4 {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem !important;
}

body.vortex-bg-active .dashboard-product-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.62rem;
}

body.vortex-bg-active .dashboard-product-kind {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.28rem 0.62rem;
    border: 1px solid rgba(0, 87, 168, 0.1);
    border-radius: 999px;
    background: rgba(0, 87, 168, 0.07);
    color: #0057a8;
    font-size: 0.66rem;
    font-weight: 760;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

body.vortex-bg-active .dashboard-product-price {
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 820;
    letter-spacing: -0.035em;
}

body.vortex-bg-active .dashboard-product-card h3 {
    min-height: 2.55rem;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 730 !important;
    letter-spacing: -0.025em;
    line-height: 1.28 !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.vortex-bg-active .dashboard-product-card h3 + .h-px {
    display: none;
}

body.vortex-bg-active .dashboard-product-card .p-4 > .flex.justify-between {
    gap: 0.6rem;
    margin-top: 0.78rem;
    margin-bottom: 0.75rem !important;
    padding-top: 0.72rem;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

body.vortex-bg-active .dashboard-product-card .p-4 > .flex.justify-between > div {
    min-width: 0;
}

body.vortex-bg-active .dashboard-product-card .p-4 .text-gray-500 {
    color: #7b8da2 !important;
    font-size: 0.72rem !important;
}

body.vortex-bg-active .dashboard-product-card .p-4 .font-medium,
body.vortex-bg-active .dashboard-product-card .p-4 .font-bold {
    overflow: hidden;
    color: #334155 !important;
    font-size: 0.74rem !important;
    font-weight: 650 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vortex-bg-active .dashboard-product-card .p-4 > .flex.space-x-2 {
    gap: 0.52rem !important;
    margin-top: auto;
    padding-top: 0.78rem;
}

body.vortex-bg-active .dashboard-product-card .p-4 > .flex.space-x-2 > a {
    display: inline-flex;
    min-height: 2.4rem;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0.72rem !important;
    background: linear-gradient(135deg, #0057a8, #0876cc) !important;
    color: #fff !important;
    font-size: 0.76rem !important;
    font-weight: 720 !important;
    box-shadow: 0 9px 18px rgba(0, 87, 168, 0.16);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

body.vortex-bg-active .dashboard-product-card .p-4 > .flex.space-x-2 > a:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0, 87, 168, 0.22);
}

body.vortex-bg-active .dashboard-product-card .add-to-cart-btn {
    display: inline-flex;
    width: 2.4rem;
    min-width: 2.4rem;
    min-height: 2.4rem;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid rgba(0, 87, 168, 0.14) !important;
    border-radius: 0.72rem !important;
    background: #edf7ff !important;
    color: #0057a8 !important;
    box-shadow: none !important;
}

body.vortex-bg-active .dashboard-product-card .add-to-cart-btn:hover {
    border-color: rgba(0, 87, 168, 0.25) !important;
    background: #dceeff !important;
    transform: translateY(-1px);
}

body.vortex-bg-active .dashboard-product-card .add-to-cart-btn svg {
    width: 1rem !important;
    height: 1rem !important;
    color: currentColor !important;
}

body.vortex-bg-active .dashboard-seller-card .p-4 > .flex.justify-between {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
}

body.vortex-bg-active .dashboard-seller-card .p-4 > .flex.justify-between > div:nth-child(2) {
    display: none;
}

body.vortex-bg-active .dashboard-seller-card .p-4 > .flex.justify-between > div:last-child {
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    background: rgba(0, 87, 168, 0.07);
}

body.vortex-bg-active .dashboard-seller-card .p-4 > .flex.items-center:not(.space-x-2) {
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.72rem;
}

@media (min-width: 1280px) {
    body.vortex-bg-active .dashboard-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 639px) {
    body.vortex-bg-active .dashboard-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.72rem !important;
    }

    body.vortex-bg-active .dashboard-product-card > a:first-child {
        height: 8.3rem !important;
        min-height: 8.3rem;
    }

    body.vortex-bg-active .dashboard-product-card > .p-4 {
        padding: 0.78rem !important;
    }

    body.vortex-bg-active .dashboard-product-card h3 {
        min-height: 2.3rem;
        font-size: 0.88rem !important;
    }

    body.vortex-bg-active .dashboard-product-price {
        font-size: 0.88rem;
    }

    body.vortex-bg-active .dashboard-product-card .p-4 > .flex.justify-between {
        display: block !important;
    }

    body.vortex-bg-active .dashboard-product-card .p-4 > .flex.justify-between > div:last-child {
        margin-top: 0.38rem;
    }
}

/* Absolute final visible theme overlay: visible on white pages, non-interactive */
body::before,
body::after {
    position: fixed !important;
    content: "" !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
}

body::before {
    inset: 0 !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 132, 255, 0.18), transparent 17rem),
        radial-gradient(circle at 88% 12%, rgba(16, 185, 129, 0.16), transparent 18rem),
        radial-gradient(circle at 74% 80%, rgba(0, 87, 168, 0.13), transparent 22rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 132, 255, 0.055) 47.2% 47.45%, transparent 47.7% 100%),
        linear-gradient(28deg, transparent 0 55%, rgba(16, 185, 129, 0.045) 55.15% 55.45%, transparent 55.7% 100%) !important;
    background-size: auto, auto, auto, 18rem 18rem, 21rem 21rem !important;
    mix-blend-mode: multiply;
    opacity: 1 !important;
    animation: tmNeuralShimmer 26s linear infinite alternate !important;
}

body::after {
    right: -9rem !important;
    top: 7rem !important;
    width: clamp(18rem, 32vw, 34rem) !important;
    height: clamp(18rem, 32vw, 34rem) !important;
    border-radius: 44% 56% 62% 38% / 48% 42% 58% 52% !important;
    background:
        radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.82), transparent 16%),
        radial-gradient(circle at 45% 42%, rgba(0, 132, 255, 0.32), transparent 34%),
        radial-gradient(circle at 66% 64%, rgba(16, 185, 129, 0.24), transparent 38%),
        radial-gradient(circle at 44% 62%, rgba(0, 87, 168, 0.22), transparent 52%) !important;
    filter: blur(18px) saturate(1.25) !important;
    opacity: 0.74 !important;
    mix-blend-mode: multiply;
    animation: tmOrbDriftSlow 24s ease-in-out infinite alternate, tmOrbPulseSubtle 8s ease-in-out infinite !important;
}

body > * {
    position: relative;
}

@media (max-width: 767px) {
    body::before {
        background:
            radial-gradient(circle at 0% 18%, rgba(0, 132, 255, 0.14), transparent 12rem),
            radial-gradient(circle at 100% 14%, rgba(16, 185, 129, 0.12), transparent 12rem),
            radial-gradient(circle at 80% 88%, rgba(0, 87, 168, 0.1), transparent 16rem) !important;
    }

    body::after {
        right: -13rem !important;
        top: 8rem !important;
        width: 24rem !important;
        height: 24rem !important;
        opacity: 0.58 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }
}

/* Final dashboard hero typography override */
.tm-standalone-page .tm-listing-header h1,
.premium-dashboard-shell .premium-page-header h1,
.premium-dashboard-shell .premium-page-title {
    color: var(--tm-text) !important;
    font-size: clamp(1.05rem, 1.8vw, 1.32rem) !important;
    font-weight: 560 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.026em !important;
}

.tm-standalone-page .tm-listing-header h1 span,
.premium-dashboard-shell .premium-page-header h1 span,
.premium-dashboard-shell .premium-page-title span {
    color: var(--tm-primary) !important;
    font-weight: 660 !important;
}

.tm-standalone-page .tm-listing-header p,
.premium-dashboard-shell .premium-page-header p,
.premium-dashboard-shell .premium-page-subtitle {
    margin-top: 0.2rem !important;
    color: #667085 !important;
    font-size: 0.82rem !important;
    font-weight: 440 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.004em !important;
}

.tm-standalone-page main h2,
.tm-standalone-page main h2.font-black,
.tm-standalone-page main h2.font-bold {
    font-weight: 650 !important;
    letter-spacing: -0.035em !important;
}

/* EOF advanced motion priority layer */
.tm-scroll-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--tm-primary), #03a9f4, #10b981, var(--tm-primary)) !important;
    background-size: 220% 100% !important;
    transform: scaleX(0);
    transform-origin: left center !important;
    animation: tmBorderRun 4.5s linear infinite !important;
    pointer-events: none !important;
}

.tm-motion-ready .tm-motion-target {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
}

.tm-motion-ready .tm-motion-target.tm-motion-visible {
    animation: tmRevealAdvanced 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--tm-reveal-delay, 0ms) both !important;
}

.tm-tilt-card {
    --tm-pointer-x: 50%;
    --tm-pointer-y: 50%;
    --tm-rotate-x: 0deg;
    --tm-rotate-y: 0deg;
    --tm-parallax-x: 0px;
    --tm-parallax-y: 0px;
    position: relative !important;
    isolation: isolate !important;
    transform: perspective(900px) rotateX(var(--tm-rotate-x)) rotateY(var(--tm-rotate-y)) translate3d(0, 0, 0) !important;
    transform-style: preserve-3d !important;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease, border-color 320ms ease !important;
}

.tm-tilt-card::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--tm-pointer-x) var(--tm-pointer-y), rgba(255, 255, 255, 0.72), transparent 24%),
        radial-gradient(circle at var(--tm-pointer-x) var(--tm-pointer-y), rgba(3, 169, 244, 0.18), transparent 38%);
    opacity: 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.tm-tilt-card.tm-tilt-active::before {
    opacity: 1;
}

.tm-tilt-card.tm-tilt-active {
    box-shadow: 0 30px 70px rgba(0, 87, 168, 0.16), 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

.tm-tilt-card > * {
    position: relative;
    z-index: 2;
}

.product-card.tm-tilt-active .product-image,
.product-card-premium.tm-tilt-active img {
    transform: scale(1.09) translate3d(var(--tm-parallax-x), var(--tm-parallax-y), 0) !important;
}

.tm-magnetic {
    --tm-magnetic-x: 0px;
    --tm-magnetic-y: 0px;
    transform: translate3d(var(--tm-magnetic-x), var(--tm-magnetic-y), 0) !important;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, background-color 220ms ease !important;
}

.tm-hero-title {
    background: linear-gradient(105deg, #0b1220 0%, var(--tm-primary) 38%, #03a9f4 56%, #0b1220 86%) !important;
    background-size: 240% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    animation: tmHeroGradientFlow 10s ease-in-out infinite !important;
}

.tm-listing-header::after,
.premium-page-header::after,
.tm-preview-card::after,
.category-strip::after,
.section-heading::after {
    animation: tmBorderRun 7s linear infinite !important;
}

.tm-stat,
.floating-card,
.tm-preview-icon {
    animation: tmFloatComplex 7.5s ease-in-out infinite !important;
}

#chatbotToggle {
    animation: tmChatBreath 4.2s ease-in-out infinite !important;
}

#chatbotWidget:not(.hidden),
.chatbot-widget:not(.hidden) {
    animation: tmRevealAdvanced 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.tm-reduced-motion .tm-motion-target,
.tm-reduced-motion .tm-motion-visible,
.tm-reduced-motion .tm-tilt-card,
.tm-reduced-motion .tm-magnetic,
.tm-reduced-motion #chatbotToggle {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
/* EOF floating AI-orb background theme: white base with premium subtle motion */
@keyframes tmOrbDriftSlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%;
    }
    35% {
        transform: translate3d(2.5rem, -1.4rem, 0) scale(1.05) rotate(12deg);
        border-radius: 58% 42% 48% 52% / 44% 61% 39% 56%;
    }
    70% {
        transform: translate3d(-1.2rem, 1.9rem, 0) scale(0.98) rotate(-9deg);
        border-radius: 38% 62% 55% 45% / 58% 44% 56% 42%;
    }
    100% {
        transform: translate3d(1.6rem, -0.7rem, 0) scale(1.02) rotate(6deg);
        border-radius: 52% 48% 42% 58% / 46% 57% 43% 54%;
    }
}

@keyframes tmNeuralShimmer {
    0% {
        background-position: 0 0, 0 0, 0 0;
        opacity: 0.28;
    }
    50% {
        opacity: 0.42;
    }
    100% {
        background-position: 7.5rem 4.5rem, -5rem 6rem, 4rem -3rem;
        opacity: 0.3;
    }
}

@keyframes tmOrbPulseSubtle {
    0%, 100% {
        opacity: 0.68;
        filter: blur(34px) saturate(1.08);
    }
    50% {
        opacity: 0.9;
        filter: blur(28px) saturate(1.2);
    }
}

html,
body {
    background: #ffffff !important;
}

.tm-page,
.tm-standalone-page,
.premium-public-shell,
.premium-dashboard-shell,
.premium-dashboard-layout,
.premium-app-bg {
    position: relative !important;
    isolation: isolate;
    overflow-x: clip;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9)),
        radial-gradient(circle at 12% 10%, rgba(3, 169, 244, 0.08), transparent 25rem),
        radial-gradient(circle at 90% 20%, rgba(16, 185, 129, 0.07), transparent 27rem),
        #ffffff !important;
}

.tm-page::before,
.tm-standalone-page::before,
.premium-public-shell::before,
.premium-dashboard-shell::before,
.premium-dashboard-layout::before,
.premium-app-bg::before {
    position: fixed !important;
    inset: 0 !important;
    z-index: -3 !important;
    width: auto !important;
    height: auto !important;
    content: "" !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(0, 87, 168, 0.14) 0 0.18rem, transparent 0.23rem),
        radial-gradient(circle at 72% 32%, rgba(3, 169, 244, 0.13) 0 0.16rem, transparent 0.22rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 87, 168, 0.045) 47.2% 47.6%, transparent 47.8% 100%),
        linear-gradient(28deg, transparent 0 52%, rgba(16, 185, 129, 0.04) 52.2% 52.55%, transparent 52.8% 100%) !important;
    background-size: 7.5rem 7.5rem, 9rem 9rem, 15rem 15rem, 18rem 18rem !important;
    opacity: 0.38 !important;
    filter: none !important;
    transform: none !important;
    animation: tmNeuralShimmer 24s linear infinite alternate !important;
    pointer-events: none !important;
}

.tm-page::after,
.tm-standalone-page::after,
.premium-public-shell::after,
.premium-dashboard-shell::after,
.premium-dashboard-layout::after,
.premium-app-bg::after {
    position: fixed !important;
    inset: auto auto -12rem -9rem !important;
    z-index: -2 !important;
    width: clamp(24rem, 42vw, 44rem) !important;
    height: clamp(24rem, 42vw, 44rem) !important;
    content: "" !important;
    border-radius: 44% 56% 62% 38% / 48% 42% 58% 52% !important;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.78), transparent 17%),
        radial-gradient(circle at 45% 42%, rgba(3, 169, 244, 0.24), transparent 34%),
        radial-gradient(circle at 66% 64%, rgba(16, 185, 129, 0.19), transparent 38%),
        radial-gradient(circle at 44% 62%, rgba(0, 87, 168, 0.16), transparent 52%) !important;
    box-shadow:
        0 0 7rem rgba(3, 169, 244, 0.1),
        inset 0 0 5rem rgba(255, 255, 255, 0.42) !important;
    opacity: 0.82 !important;
    filter: blur(26px) saturate(1.12) !important;
    animation: tmOrbDriftSlow 28s ease-in-out infinite alternate, tmOrbPulseSubtle 10s ease-in-out infinite !important;
    pointer-events: none !important;
}

.tm-page > *,
.tm-standalone-page > *,
.premium-public-shell > *,
.premium-dashboard-shell > *,
.premium-dashboard-layout > *,
.premium-app-bg > * {
    position: relative;
    z-index: 1;
}

.tm-hero::before,
.premium-dashboard-main::before,
.tm-standalone-page main::before,
.premium-public-shell main::before {
    position: fixed;
    top: clamp(5rem, 12vh, 8rem);
    right: clamp(-10rem, -12vw, -5rem);
    z-index: -1;
    width: clamp(20rem, 34vw, 36rem);
    height: clamp(20rem, 34vw, 36rem);
    content: "";
    border-radius: 58% 42% 51% 49% / 45% 58% 42% 55%;
    background:
        radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.86), transparent 16%),
        radial-gradient(circle at 48% 48%, rgba(0, 87, 168, 0.18), transparent 35%),
        radial-gradient(circle at 66% 62%, rgba(3, 169, 244, 0.22), transparent 42%),
        radial-gradient(circle at 42% 70%, rgba(16, 185, 129, 0.14), transparent 48%);
    filter: blur(24px) saturate(1.18);
    opacity: 0.78;
    animation: tmOrbDriftSlow 32s ease-in-out infinite alternate-reverse;
    pointer-events: none;
}

.tm-site-nav,
.tm-listing-header,
.premium-sidebar,
.premium-sidebar-panel,
.premium-public-card,
.premium-page-header,
.premium-card,
.dashboard-card,
.form-panel,
.product-card,
.product-card-premium,
.category-strip,
.benefit-card,
.section-heading {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(18px) saturate(1.08);
}

@media (max-width: 767px) {
    .tm-page::before,
    .tm-standalone-page::before,
    .premium-public-shell::before,
    .premium-dashboard-shell::before,
    .premium-dashboard-layout::before,
    .premium-app-bg::before {
        opacity: 0.24 !important;
        background-size: 6rem 6rem, 7.5rem 7.5rem, 12rem 12rem, 14rem 14rem !important;
    }

    .tm-page::after,
    .tm-standalone-page::after,
    .premium-public-shell::after,
    .premium-dashboard-shell::after,
    .premium-dashboard-layout::after,
    .premium-app-bg::after {
        inset: auto auto -10rem -13rem !important;
        width: 26rem !important;
        height: 26rem !important;
        opacity: 0.62 !important;
        filter: blur(32px) saturate(1.05) !important;
    }

    .tm-hero::before,
    .premium-dashboard-main::before,
    .tm-standalone-page main::before,
    .premium-public-shell main::before {
        top: 4rem;
        right: -13rem;
        width: 25rem;
        height: 25rem;
        opacity: 0.52;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-page::before,
    .tm-page::after,
    .tm-standalone-page::before,
    .tm-standalone-page::after,
    .premium-public-shell::before,
    .premium-public-shell::after,
    .premium-dashboard-shell::before,
    .premium-dashboard-shell::after,
    .premium-dashboard-layout::before,
    .premium-dashboard-layout::after,
    .premium-app-bg::before,
    .premium-app-bg::after,
    .tm-hero::before,
    .premium-dashboard-main::before,
    .tm-standalone-page main::before,
    .premium-public-shell main::before {
        animation: none !important;
    }
}

/* EOF floating AI-orb background theme: white base with premium subtle motion */
@keyframes tmOrbDriftSlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%;
    }
    35% {
        transform: translate3d(2.5rem, -1.4rem, 0) scale(1.05) rotate(12deg);
        border-radius: 58% 42% 48% 52% / 44% 61% 39% 56%;
    }
    70% {
        transform: translate3d(-1.2rem, 1.9rem, 0) scale(0.98) rotate(-9deg);
        border-radius: 38% 62% 55% 45% / 58% 44% 56% 42%;
    }
    100% {
        transform: translate3d(1.6rem, -0.7rem, 0) scale(1.02) rotate(6deg);
        border-radius: 52% 48% 42% 58% / 46% 57% 43% 54%;
    }
}

@keyframes tmNeuralShimmer {
    0% {
        background-position: 0 0, 0 0, 0 0;
        opacity: 0.28;
    }
    50% {
        opacity: 0.42;
    }
    100% {
        background-position: 7.5rem 4.5rem, -5rem 6rem, 4rem -3rem;
        opacity: 0.3;
    }
}

@keyframes tmOrbPulseSubtle {
    0%, 100% {
        opacity: 0.68;
        filter: blur(34px) saturate(1.08);
    }
    50% {
        opacity: 0.9;
        filter: blur(28px) saturate(1.2);
    }
}

html,
body {
    background: #ffffff !important;
}

.tm-page,
.tm-standalone-page,
.premium-public-shell,
.premium-dashboard-shell,
.premium-dashboard-layout,
.premium-app-bg {
    position: relative !important;
    isolation: isolate;
    overflow-x: clip;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9)),
        radial-gradient(circle at 12% 10%, rgba(3, 169, 244, 0.08), transparent 25rem),
        radial-gradient(circle at 90% 20%, rgba(16, 185, 129, 0.07), transparent 27rem),
        #ffffff !important;
}

.tm-page::before,
.tm-standalone-page::before,
.premium-public-shell::before,
.premium-dashboard-shell::before,
.premium-dashboard-layout::before,
.premium-app-bg::before {
    position: fixed !important;
    inset: 0 !important;
    z-index: -3 !important;
    width: auto !important;
    height: auto !important;
    content: "" !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(0, 87, 168, 0.14) 0 0.18rem, transparent 0.23rem),
        radial-gradient(circle at 72% 32%, rgba(3, 169, 244, 0.13) 0 0.16rem, transparent 0.22rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 87, 168, 0.045) 47.2% 47.6%, transparent 47.8% 100%),
        linear-gradient(28deg, transparent 0 52%, rgba(16, 185, 129, 0.04) 52.2% 52.55%, transparent 52.8% 100%) !important;
    background-size: 7.5rem 7.5rem, 9rem 9rem, 15rem 15rem, 18rem 18rem !important;
    opacity: 0.38 !important;
    filter: none !important;
    transform: none !important;
    animation: tmNeuralShimmer 24s linear infinite alternate !important;
    pointer-events: none !important;
}

.tm-page::after,
.tm-standalone-page::after,
.premium-public-shell::after,
.premium-dashboard-shell::after,
.premium-dashboard-layout::after,
.premium-app-bg::after {
    position: fixed !important;
    inset: auto auto -12rem -9rem !important;
    z-index: -2 !important;
    width: clamp(24rem, 42vw, 44rem) !important;
    height: clamp(24rem, 42vw, 44rem) !important;
    content: "" !important;
    border-radius: 44% 56% 62% 38% / 48% 42% 58% 52% !important;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.78), transparent 17%),
        radial-gradient(circle at 45% 42%, rgba(3, 169, 244, 0.24), transparent 34%),
        radial-gradient(circle at 66% 64%, rgba(16, 185, 129, 0.19), transparent 38%),
        radial-gradient(circle at 44% 62%, rgba(0, 87, 168, 0.16), transparent 52%) !important;
    box-shadow:
        0 0 7rem rgba(3, 169, 244, 0.1),
        inset 0 0 5rem rgba(255, 255, 255, 0.42) !important;
    opacity: 0.82 !important;
    filter: blur(26px) saturate(1.12) !important;
    animation: tmOrbDriftSlow 28s ease-in-out infinite alternate, tmOrbPulseSubtle 10s ease-in-out infinite !important;
    pointer-events: none !important;
}

.tm-page > *,
.tm-standalone-page > *,
.premium-public-shell > *,
.premium-dashboard-shell > *,
.premium-dashboard-layout > *,
.premium-app-bg > * {
    position: relative;
    z-index: 1;
}

.tm-hero::before,
.premium-dashboard-main::before,
.tm-standalone-page main::before,
.premium-public-shell main::before {
    position: fixed;
    top: clamp(5rem, 12vh, 8rem);
    right: clamp(-10rem, -12vw, -5rem);
    z-index: -1;
    width: clamp(20rem, 34vw, 36rem);
    height: clamp(20rem, 34vw, 36rem);
    content: "";
    border-radius: 58% 42% 51% 49% / 45% 58% 42% 55%;
    background:
        radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.86), transparent 16%),
        radial-gradient(circle at 48% 48%, rgba(0, 87, 168, 0.18), transparent 35%),
        radial-gradient(circle at 66% 62%, rgba(3, 169, 244, 0.22), transparent 42%),
        radial-gradient(circle at 42% 70%, rgba(16, 185, 129, 0.14), transparent 48%);
    filter: blur(24px) saturate(1.18);
    opacity: 0.78;
    animation: tmOrbDriftSlow 32s ease-in-out infinite alternate-reverse;
    pointer-events: none;
}

.tm-site-nav,
.tm-listing-header,
.premium-sidebar,
.premium-sidebar-panel,
.premium-public-card,
.premium-page-header,
.premium-card,
.dashboard-card,
.form-panel,
.product-card,
.product-card-premium,
.category-strip,
.benefit-card,
.section-heading {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(18px) saturate(1.08);
}

@media (max-width: 767px) {
    .tm-page::before,
    .tm-standalone-page::before,
    .premium-public-shell::before,
    .premium-dashboard-shell::before,
    .premium-dashboard-layout::before,
    .premium-app-bg::before {
        opacity: 0.24 !important;
        background-size: 6rem 6rem, 7.5rem 7.5rem, 12rem 12rem, 14rem 14rem !important;
    }

    .tm-page::after,
    .tm-standalone-page::after,
    .premium-public-shell::after,
    .premium-dashboard-shell::after,
    .premium-dashboard-layout::after,
    .premium-app-bg::after {
        inset: auto auto -10rem -13rem !important;
        width: 26rem !important;
        height: 26rem !important;
        opacity: 0.62 !important;
        filter: blur(32px) saturate(1.05) !important;
    }

    .tm-hero::before,
    .premium-dashboard-main::before,
    .tm-standalone-page main::before,
    .premium-public-shell main::before {
        top: 4rem;
        right: -13rem;
        width: 25rem;
        height: 25rem;
        opacity: 0.52;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-page::before,
    .tm-page::after,
    .tm-standalone-page::before,
    .tm-standalone-page::after,
    .premium-public-shell::before,
    .premium-public-shell::after,
    .premium-dashboard-shell::before,
    .premium-dashboard-shell::after,
    .premium-dashboard-layout::before,
    .premium-dashboard-layout::after,
    .premium-app-bg::before,
    .premium-app-bg::after,
    .tm-hero::before,
    .premium-dashboard-main::before,
    .tm-standalone-page main::before,
    .premium-public-shell main::before {
        animation: none !important;
    }
}

/* Advanced motion system: interactive depth, scroll choreography, and animated polish */
@keyframes tmRevealAdvanced {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 28px, 0) scale(0.985);
    }
    65% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes tmHeroGradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes tmMeshOrbit {
    0% {
        transform: translate3d(-2%, 1%, 0) rotate(0deg) scale(1);
    }
    33% {
        transform: translate3d(4%, -3%, 0) rotate(24deg) scale(1.06);
    }
    66% {
        transform: translate3d(-1%, 4%, 0) rotate(-14deg) scale(0.98);
    }
    100% {
        transform: translate3d(2%, -1%, 0) rotate(10deg) scale(1.03);
    }
}

@keyframes tmBorderRun {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 220% 50%;
    }
}

@keyframes tmFloatComplex {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    30% {
        transform: translate3d(8px, -12px, 0) rotate(1.2deg);
    }
    62% {
        transform: translate3d(-9px, 7px, 0) rotate(-1deg);
    }
}

@keyframes tmChatBreath {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 18px 42px rgba(0, 87, 168, 0.24);
    }
    50% {
        transform: translate3d(0, -3px, 0) scale(1.035);
        box-shadow: 0 24px 58px rgba(0, 87, 168, 0.34);
    }
}

.tm-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--tm-primary), #03a9f4, #10b981, var(--tm-primary));
    background-size: 220% 100%;
    transform: scaleX(0);
    transform-origin: left center;
    animation: tmBorderRun 4.5s linear infinite;
    pointer-events: none;
}

.tm-motion-ready .tm-motion-target {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
}

.tm-motion-ready .tm-motion-target.tm-motion-visible {
    animation: tmRevealAdvanced 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--tm-reveal-delay, 0ms) both;
}

.tm-page,
.tm-standalone-page,
.premium-public-shell,
.premium-dashboard-shell {
    position: relative;
    overflow-x: clip;
}

.tm-page::after,
.tm-standalone-page::after,
.premium-dashboard-shell::after {
    position: fixed;
    inset: 10% auto auto 58%;
    z-index: -2;
    width: clamp(22rem, 44vw, 46rem);
    height: clamp(22rem, 44vw, 46rem);
    content: "";
    border-radius: 42% 58% 63% 37% / 47% 41% 59% 53%;
    background:
        radial-gradient(circle at 22% 24%, rgba(3, 169, 244, 0.16), transparent 28%),
        radial-gradient(circle at 72% 36%, rgba(16, 185, 129, 0.14), transparent 30%),
        radial-gradient(circle at 42% 74%, rgba(0, 87, 168, 0.12), transparent 32%);
    filter: blur(18px);
    opacity: 0.86;
    animation: tmMeshOrbit 15s ease-in-out infinite alternate;
    pointer-events: none;
}

.tm-hero-title {
    background: linear-gradient(105deg, #0b1220 0%, var(--tm-primary) 38%, #03a9f4 56%, #0b1220 86%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation: tmHeroGradientFlow 10s ease-in-out infinite;
}

.tm-hero,
.tm-preview-card,
.category-strip,
.section-heading,
.premium-page-header,
.tm-listing-header,
.premium-card,
.dashboard-card,
.form-panel,
.product-card,
.product-card-premium,
.benefit-card,
.category-shortcut {
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.tm-listing-header,
.premium-page-header,
.tm-preview-card,
.category-strip,
.section-heading {
    position: relative;
    overflow: hidden;
}

.tm-listing-header::after,
.premium-page-header::after,
.tm-preview-card::after,
.category-strip::after,
.section-heading::after {
    position: absolute;
    inset: auto 1.1rem 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(0, 87, 168, 0.46), rgba(3, 169, 244, 0.55), transparent);
    background-size: 220% 100%;
    opacity: 0.85;
    animation: tmBorderRun 7s linear infinite;
    pointer-events: none;
}

.tm-tilt-card {
    --tm-pointer-x: 50%;
    --tm-pointer-y: 50%;
    --tm-rotate-x: 0deg;
    --tm-rotate-y: 0deg;
    --tm-parallax-x: 0px;
    --tm-parallax-y: 0px;
    position: relative;
    isolation: isolate;
    transform: perspective(900px) rotateX(var(--tm-rotate-x)) rotateY(var(--tm-rotate-y)) translate3d(0, 0, 0);
    transition:
        transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 320ms ease,
        border-color 320ms ease;
}

.tm-tilt-card::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--tm-pointer-x) var(--tm-pointer-y), rgba(255, 255, 255, 0.72), transparent 24%),
        radial-gradient(circle at var(--tm-pointer-x) var(--tm-pointer-y), rgba(3, 169, 244, 0.18), transparent 38%);
    opacity: 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.tm-tilt-card.tm-tilt-active::before {
    opacity: 1;
}

.tm-tilt-card.tm-tilt-active {
    box-shadow: 0 30px 70px rgba(0, 87, 168, 0.16), 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

.tm-tilt-card > * {
    position: relative;
    z-index: 2;
}

.product-card.tm-tilt-active .product-image,
.product-card-premium.tm-tilt-active img {
    transform: scale(1.09) translate3d(var(--tm-parallax-x), var(--tm-parallax-y), 0) !important;
}

.tm-magnetic {
    --tm-magnetic-x: 0px;
    --tm-magnetic-y: 0px;
    transform: translate3d(var(--tm-magnetic-x), var(--tm-magnetic-y), 0);
    transition:
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.tm-stat,
.floating-card,
.tm-preview-icon {
    animation: tmFloatComplex 7.5s ease-in-out infinite;
}

.tm-stat:nth-child(2),
.floating-card:nth-child(2) {
    animation-delay: -1.4s;
}

.tm-stat:nth-child(3),
.floating-card:nth-child(3) {
    animation-delay: -2.7s;
}

.tm-stat:nth-child(4),
.floating-card:nth-child(4) {
    animation-delay: -4.1s;
}

#chatbotToggle {
    animation: tmChatBreath 4.2s ease-in-out infinite !important;
}

#chatbotWidget:not(.hidden),
.chatbot-widget:not(.hidden) {
    animation: tmRevealAdvanced 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-type-badge,
.product-subtype,
.trust-chip,
.reason-chip,
.count-badge {
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), background-color 240ms ease;
}

.product-card:hover .product-type-badge,
.product-card-premium:hover .product-type-badge,
.product-card:hover .product-subtype,
.product-card-premium:hover .product-subtype,
.product-card:hover .trust-chip,
.product-card-premium:hover .trust-chip,
.product-card:hover .reason-chip,
.product-card-premium:hover .reason-chip {
    transform: translate3d(0, -2px, 18px);
}

.product-card:hover .card-primary-action,
.product-card-premium:hover .card-primary-action,
.category-shortcut:hover .category-shortcut-icon,
.benefit-card:hover .benefit-icon {
    transform: translate3d(0, -2px, 26px) scale(1.03);
}

.tm-reduced-motion .tm-motion-target,
.tm-reduced-motion .tm-motion-visible,
.tm-reduced-motion .tm-tilt-card,
.tm-reduced-motion .tm-magnetic {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Premium motion pass: subtle entrance, hover depth, and dashboard heading polish */
@keyframes tmFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes tmScaleIn {
    from {
        opacity: 0;
        transform: scale(0.975) translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
    }
}

@keyframes tmSlideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-18px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes tmGlowDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.55;
    }
    50% {
        transform: translate3d(18px, -14px, 0) scale(1.06);
        opacity: 0.72;
    }
    100% {
        transform: translate3d(-10px, 12px, 0) scale(0.98);
        opacity: 0.6;
    }
}

@keyframes tmShimmer {
    from {
        transform: translateX(-140%) skewX(-16deg);
    }
    to {
        transform: translateX(180%) skewX(-16deg);
    }
}

@keyframes tmRingPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 87, 168, 0.18);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 87, 168, 0);
    }
}

.tm-page::before,
.tm-standalone-page::before,
.premium-public-shell::after {
    position: fixed;
    z-index: -1;
    width: clamp(16rem, 30vw, 28rem);
    height: clamp(16rem, 30vw, 28rem);
    content: "";
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 87, 168, 0.12), rgba(3, 169, 244, 0.07), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
    animation: tmGlowDrift 12s ease-in-out infinite alternate;
}

.tm-page::before {
    top: 7rem;
    right: -8rem;
}

.tm-standalone-page::before {
    right: -10rem;
    bottom: 5rem;
}

.premium-public-shell::after {
    right: -9rem;
    bottom: -8rem;
}

.tm-site-nav,
.tm-listing-header,
.premium-topbar,
.premium-page-header {
    animation: tmFadeUp 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.premium-sidebar,
.premium-sidebar-panel {
    animation: tmSlideInLeft 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tm-hero .tm-eyebrow,
.tm-hero-title,
.tm-hero-copy,
.tm-hero .tm-btn,
.tm-stat-grid,
.tm-preview-card,
.category-strip,
#ai-discovery .benefit-card,
.product-section > div > .section-heading,
.premium-public-card,
.premium-card,
.dashboard-card,
.form-panel {
    animation: tmFadeUp 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tm-hero-title {
    animation-delay: 80ms;
}

.tm-hero-copy {
    animation-delay: 150ms;
}

.tm-hero .tm-btn {
    animation-delay: 220ms;
}

.tm-stat-grid,
.tm-preview-card {
    animation-delay: 280ms;
}

.category-strip,
#ai-discovery .benefit-card:nth-child(1),
.product-section > div > .section-heading {
    animation-delay: 90ms;
}

#ai-discovery .benefit-card:nth-child(2) {
    animation-delay: 170ms;
}

#ai-discovery .benefit-card:nth-child(3) {
    animation-delay: 250ms;
}

.product-card,
.product-card-premium,
.tm-standalone-page .grid > .bg-white,
.tm-standalone-page main > section,
.tm-standalone-page main > div {
    animation: tmScaleIn 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.product-grid > *:nth-child(1),
.premium-product-grid > *:nth-child(1),
.tm-standalone-page .grid > *:nth-child(1) {
    animation-delay: 40ms;
}

.product-grid > *:nth-child(2),
.premium-product-grid > *:nth-child(2),
.tm-standalone-page .grid > *:nth-child(2) {
    animation-delay: 90ms;
}

.product-grid > *:nth-child(3),
.premium-product-grid > *:nth-child(3),
.tm-standalone-page .grid > *:nth-child(3) {
    animation-delay: 140ms;
}

.product-grid > *:nth-child(4),
.premium-product-grid > *:nth-child(4),
.tm-standalone-page .grid > *:nth-child(4) {
    animation-delay: 190ms;
}

.product-grid > *:nth-child(n+5),
.premium-product-grid > *:nth-child(n+5),
.tm-standalone-page .grid > *:nth-child(n+5) {
    animation-delay: 230ms;
}

.tm-btn,
.premium-btn-primary,
.premium-button-primary,
.card-primary-action,
.premium-sidebar-cta,
button[type="submit"] {
    position: relative;
    overflow: hidden;
}

.tm-btn::before,
.premium-btn-primary::before,
.premium-button-primary::before,
.card-primary-action::before,
.premium-sidebar-cta::before,
button[type="submit"]::before {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 42%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: translateX(-140%) skewX(-16deg);
    pointer-events: none;
}

.tm-btn:hover::before,
.premium-btn-primary:hover::before,
.premium-button-primary:hover::before,
.card-primary-action:hover::before,
.premium-sidebar-cta:hover::before,
button[type="submit"]:hover::before {
    animation: tmShimmer 850ms ease;
}

.product-card,
.product-card-premium,
.benefit-card,
.category-shortcut,
.premium-card,
.dashboard-card,
.form-panel {
    will-change: transform, box-shadow;
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 240ms ease,
        border-color 240ms ease,
        background-color 240ms ease;
}

.product-card:hover,
.product-card-premium:hover,
.benefit-card:hover,
.premium-card:hover,
.dashboard-card:hover {
    transform: translate3d(0, -5px, 0) !important;
}

.category-shortcut:hover,
.premium-sidebar-link:hover {
    transform: translate3d(3px, -1px, 0) !important;
}

.tm-preview-icon,
.category-shortcut-icon,
.benefit-icon,
#chatbotToggle {
    animation: tmRingPulse 3.8s ease-in-out infinite;
}

.tm-listing-header h1 {
    color: var(--tm-text) !important;
    font-size: clamp(1.05rem, 1.8vw, 1.32rem) !important;
    font-weight: 570 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.024em !important;
}

.tm-listing-header h1 span {
    color: var(--tm-primary) !important;
    font-weight: 680 !important;
}

.tm-listing-header p {
    margin-top: 0.18rem !important;
    color: #667085 !important;
    font-size: 0.82rem !important;
    font-weight: 450 !important;
    letter-spacing: -0.005em !important;
}

.tm-standalone-page main h2 {
    font-weight: 660 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.12 !important;
}

.tm-standalone-page main h2.font-black,
.tm-standalone-page main h2.font-bold {
    font-weight: 660 !important;
}

.tm-standalone-page main h3 {
    font-weight: 620 !important;
    letter-spacing: -0.018em !important;
}

.tm-standalone-page .text-teal-900.text-2xl,
.tm-standalone-page .text-teal-950.text-3xl,
.tm-standalone-page .text-teal-950.text-2xl {
    font-weight: 660 !important;
    line-height: 1.14 !important;
}

.tm-standalone-page main .font-\\['Urbanist'\\],
.tm-standalone-page main .font-\\['Poppins'\\] {
    font-family: "Geist", sans-serif !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 767px) and (max-height: 700px) {
    .chatbot-toggle {
        bottom: calc(3.75rem + env(safe-area-inset-bottom));
        width: 3.15rem;
        height: 3.15rem;
        border-radius: 1.05rem;
    }

    .chatbot-toggle i {
        font-size: 1.15rem !important;
    }

    .chatbot-widget {
        bottom: calc(7.5rem + env(safe-area-inset-bottom));
        height: min(26rem, calc(100vh - 8.75rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Premium AI app-wide design system */
:root {
    --premium-ink: #111827;
    --premium-muted: #56636f;
    --premium-teal: #0074c8;
    --premium-teal-dark: #0057a8;
    --premium-navy: #06365f;
    --premium-cyan: #eef7ff;
    --premium-surface: rgba(255, 255, 255, 0.9);
    --premium-border: rgba(0, 87, 168, 0.14);
    --premium-shadow: 0 24px 60px rgba(0, 87, 168, 0.12);
    --premium-radius: 1.5rem;
    --vortex-med-blue: #0057a8;
    --vortex-med-blue-2: #0074c8;
    --vortex-med-navy: #06365f;
    --vortex-med-sky: #eef7ff;
    --vortex-med-sky-2: #f6fbff;
    --vortex-med-amber: #e88713;
    --vortex-med-success: #299966;
}

body {
    background:
        radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 28rem),
        radial-gradient(circle at 100% 8%, rgba(14, 165, 233, 0.13), transparent 30rem),
        linear-gradient(180deg, #f8fffd 0%, #f4fbfa 52%, #ffffff 100%) !important;
    color: var(--premium-ink);
}

.premium-app-bg,
.premium-public-bg {
    min-height: 100vh;
}

.premium-public-bg {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.premium-public-bg #djDebug,
.premium-public-bg .djdt-hidden {
    display: none !important;
}

.premium-dashboard-layout {
    display: flex;
    min-height: 100vh;
}

.premium-dashboard-main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.premium-dashboard-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.premium-mobile-menu-button {
    position: fixed;
    top: 0.9rem;
    right: 1rem;
    z-index: 60;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--premium-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.88);
    color: var(--premium-teal-dark);
    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.12);
    backdrop-filter: blur(18px);
}

.premium-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(2, 6, 23, 0.38);
    backdrop-filter: blur(8px);
}

.premium-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.86)),
        radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 20rem);
}

.premium-sidebar-brand {
    padding: 1.25rem;
    border-bottom: 1px solid rgba(15, 118, 110, 0.1);
}

.premium-logo-mark {
    display: inline-flex;
    width: 2.65rem;
    height: 2.65rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--premium-teal-dark), var(--premium-navy));
    color: #fff;
    box-shadow: 0 18px 36px rgba(15, 63, 58, 0.22);
}

.premium-logo-mark img {
    display: block;
    height: 1.35rem;
    width: 1.35rem;
    object-fit: contain;
}

.premium-sidebar-mobile-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 45;
    display: none;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    background: rgba(255, 255, 255, 0.92);
    color: var(--premium-teal-dark);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(18px);
}

.premium-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(3px);
}

.premium-sidebar-nav {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
}

.premium-sidebar-link {
    position: relative;
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid transparent;
    border-radius: 1.1rem;
    padding: 0.75rem 0.85rem;
    font-size: 0.94rem;
    font-weight: 850;
    color: #475569;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.premium-sidebar-link:hover,
.premium-sidebar-link.is-active {
    transform: translateX(2px);
    border-color: rgba(15, 118, 110, 0.12);
    background: rgba(255, 255, 255, 0.78);
    color: var(--premium-teal-dark);
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.09);
}

.premium-sidebar-link.is-active::before {
    position: absolute;
    left: -0.35rem;
    width: 0.24rem;
    height: 1.6rem;
    content: "";
    border-radius: 9999px;
    background: linear-gradient(180deg, #14b8a6, #0f766e);
}

.premium-sidebar-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: #ecfeff;
    color: var(--premium-teal);
}

.premium-sidebar-badge {
    margin-left: auto;
    min-width: 1.2rem;
    height: 1.2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

.premium-sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid rgba(15, 118, 110, 0.1);
}

.premium-sidebar-user,
.premium-profile-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.premium-sidebar-user {
    border: 1px solid rgba(15, 118, 110, 0.1);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.66);
    padding: 0.75rem;
}

.premium-sidebar-user strong,
.premium-profile-chip strong {
    display: block;
    overflow: hidden;
    color: var(--premium-ink);
    font-size: 0.88rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-sidebar-user small,
.premium-profile-chip small {
    display: block;
    color: var(--premium-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.premium-avatar {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 9999px;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.2);
}

.premium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-sidebar-cta,
.premium-sidebar-logout {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 9999px;
    font-size: 0.86rem;
    font-weight: 900;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.premium-sidebar-cta {
    background: linear-gradient(135deg, var(--premium-teal-dark), var(--premium-navy));
    color: #fff;
    box-shadow: 0 16px 32px rgba(15, 63, 58, 0.2);
}

.premium-sidebar-logout {
    border: 1px solid rgba(239, 68, 68, 0.14);
    background: #fff;
    color: #dc2626;
}

.premium-sidebar-cta:hover,
.premium-sidebar-logout:hover {
    transform: translateY(-2px);
}

.premium-topbar,
.premium-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, 0.78);
    padding: 1rem;
    box-shadow: var(--premium-shadow);
    backdrop-filter: blur(20px);
}

.premium-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.premium-profile-chip {
    border: 1px solid rgba(15, 118, 110, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.76);
    padding: 0.45rem 0.45rem 0.45rem 0.9rem;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.08);
}

.premium-kicker {
    margin-bottom: 0.35rem;
    color: var(--premium-teal);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.premium-page-title {
    color: var(--premium-ink);
    font-size: clamp(1.65rem, 3vw, 2.7rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.045em;
}

.premium-page-subtitle {
    margin-top: 0.45rem;
    color: var(--premium-muted);
    font-weight: 650;
}

.premium-public-shell {
    position: relative;
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow-x: clip;
    overflow-y: hidden;
    padding: clamp(0.5rem, 1.5vh, 1.1rem) clamp(0.75rem, 2vw, 1.5rem);
}

.premium-public-shell::before {
    position: fixed;
    inset: auto auto 10% -8rem;
    width: 22rem;
    height: 22rem;
    content: "";
    border-radius: 9999px;
    background: rgba(45, 212, 191, 0.22);
    filter: blur(70px);
    pointer-events: none;
}

.premium-public-logo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    width: max-content;
    align-items: center;
    gap: 0.8rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.76);
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    color: var(--premium-teal-dark);
    font-weight: 950;
    letter-spacing: 0.16em;
    box-shadow: 0 18px 40px rgba(15, 118, 110, 0.1);
    backdrop-filter: blur(18px);
}

.premium-public-main {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 0;
    flex: 1;
    place-items: center;
    padding: clamp(0.45rem, 1.4vh, 1rem) 0 0;
}

.premium-auth-layout {
    display: grid;
    height: min(39rem, 100%);
    max-height: 100%;
    width: min(100%, 74rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(24rem, 0.88fr);
    align-items: stretch;
    gap: clamp(1rem, 2.5vw, 1.65rem);
}

.premium-auth-layout-register {
    height: min(42rem, 100%);
    width: min(100%, 78rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(27rem, 1fr);
}

.premium-auth-layout-compact {
    height: min(37rem, 100%);
    width: min(100%, 68rem);
}

.premium-auth-visual,
.premium-auth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 0 30px 90px rgba(15, 63, 58, 0.12);
    backdrop-filter: blur(22px);
}

.premium-auth-visual {
    min-height: 0;
    max-height: 100%;
    background:
        linear-gradient(145deg, rgba(6, 78, 59, 0.93), rgba(8, 47, 73, 0.94)),
        radial-gradient(circle at 15% 15%, rgba(45, 212, 191, 0.38), transparent 22rem);
    color: #fff;
}

.premium-auth-card {
    display: flex;
    min-height: 0;
    max-height: 100%;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    padding: clamp(1rem, 2.8vh, 2.1rem) clamp(1.15rem, 3vw, 2.35rem);
}

.premium-auth-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(6px);
    opacity: 0.7;
    pointer-events: none;
}

.premium-auth-orb-one {
    inset: 8% auto auto 8%;
    width: 12rem;
    height: 12rem;
    background: rgba(45, 212, 191, 0.24);
}

.premium-auth-orb-two {
    right: -5rem;
    bottom: -5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(14, 165, 233, 0.2);
}

.premium-auth-visual-content {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    min-height: inherit;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.premium-auth-pill {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.55rem 0.8rem;
    color: #cffafe;
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.premium-auth-visual h2 {
    margin-top: 1.25rem;
    max-width: 12ch;
    color: #fff;
    font-size: clamp(2.35rem, 5vw, 4.45rem);
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: -0.075em;
}

.premium-auth-visual p {
    margin-top: 1rem;
    max-width: 34rem;
    color: rgba(240, 253, 250, 0.78);
    font-size: clamp(0.98rem, 1.8vw, 1.08rem);
    font-weight: 650;
    line-height: 1.7;
}

.premium-auth-showcase {
    display: grid;
    gap: 0.8rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.premium-auth-showcase div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.8rem;
    row-gap: 0.2rem;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.9rem;
}

.premium-auth-showcase i {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    grid-row: span 2;
    place-items: center;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.16);
    color: #99f6e4;
}

.premium-auth-showcase strong {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 950;
}

.premium-auth-showcase span {
    color: rgba(240, 253, 250, 0.72);
    font-size: 0.82rem;
    font-weight: 650;
}

.premium-auth-code-preview {
    display: flex;
    gap: clamp(0.45rem, 1.2vw, 0.85rem);
    margin-top: 2rem;
}

.premium-auth-code-preview span {
    display: grid;
    width: clamp(2.4rem, 6vw, 3.7rem);
    height: clamp(2.4rem, 6vw, 3.7rem);
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    color: #ccfbf1;
    font-size: 1.65rem;
    font-weight: 950;
}

.premium-auth-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 1.4rem;
    background: linear-gradient(135deg, #ecfeff, #f0fdfa);
    color: var(--premium-teal-dark);
    font-size: 1.45rem;
    box-shadow: 0 18px 42px rgba(15, 118, 110, 0.12);
}

.premium-auth-header {
    text-align: center;
}

.premium-auth-icon + .premium-auth-header {
    margin-top: 1.1rem;
    text-align: left;
}

.premium-auth-header h1 {
    margin-top: 0.35rem;
    color: var(--premium-ink);
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.premium-auth-header p:not(.premium-kicker) {
    margin: 0.7rem auto 0;
    max-width: 32rem;
    color: var(--premium-muted);
    font-size: clamp(0.95rem, 1.7vw, 1.05rem);
    font-weight: 650;
    line-height: 1.6;
}

.premium-auth-icon + .premium-auth-header p:not(.premium-kicker) {
    margin-left: 0;
    margin-right: 0;
}

.premium-auth-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 1.45rem 0;
}

.premium-auth-stats span {
    border: 1px solid rgba(15, 118, 110, 0.08);
    border-radius: 1.2rem;
    background: linear-gradient(135deg, rgba(236, 254, 255, 0.86), rgba(240, 253, 250, 0.86));
    padding: 0.85rem 0.55rem;
    color: var(--premium-teal-dark);
    text-align: center;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.premium-auth-stats strong {
    display: block;
    color: var(--premium-ink);
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}

.premium-auth-form {
    display: grid;
    gap: clamp(0.62rem, 1.35vh, 1rem);
    margin-top: clamp(0.75rem, 1.8vh, 1.4rem);
}

.premium-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.premium-field {
    display: grid;
    gap: 0.45rem;
}

.premium-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.premium-field-row a,
.premium-auth-switch a {
    color: var(--premium-teal-dark);
    font-weight: 950;
    text-decoration: none;
}

.premium-field-row a:hover,
.premium-auth-switch a:hover {
    text-decoration: underline;
}

.premium-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.premium-field select,
.premium-field textarea {
    width: 100%;
    min-height: clamp(2.65rem, 5.8vh, 3.15rem);
    padding: clamp(0.65rem, 1.4vh, 0.9rem) 1rem !important;
    font-size: 0.96rem;
    font-weight: 700;
}

.premium-code-field input {
    max-width: 15rem;
    min-height: 4rem !important;
    text-align: center;
    font-size: 1.7rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.25em;
}

.premium-field-error {
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 800;
}

.premium-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    border: 1px solid rgba(220, 38, 38, 0.16);
    border-radius: 1rem;
    background: #fef2f2;
    padding: 0.85rem 1rem;
    color: #b91c1c;
    font-size: 0.9rem;
    font-weight: 800;
}

.premium-message-success {
    border-color: rgba(20, 184, 166, 0.22);
    background: #f0fdfa;
    color: #0f766e;
}

.premium-message-info {
    border-color: rgba(14, 165, 233, 0.2);
    background: #f0f9ff;
    color: #0369a1;
}

.premium-message-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: #fffbeb;
    color: #b45309;
}

.premium-message-error {
    border-color: rgba(220, 38, 38, 0.16);
    background: #fef2f2;
    color: #b91c1c;
}

.premium-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--premium-muted) !important;
    font-size: 0.92rem;
    font-weight: 800 !important;
    line-height: 1.5;
}

.premium-check-row input {
    margin-top: 0.18rem;
    flex: 0 0 auto;
}

.premium-auth-submit {
    display: inline-flex;
    min-height: clamp(2.8rem, 6vh, 3.25rem);
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--premium-teal-dark), var(--premium-navy));
    color: #fff;
    font-weight: 950;
    box-shadow: 0 20px 44px rgba(15, 63, 58, 0.22);
}

.premium-btn-secondary {
    display: inline-flex;
    min-height: 3.05rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.74);
    padding: 0.75rem 1rem;
    color: var(--premium-teal-dark);
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.08);
}

.premium-btn-secondary:hover {
    transform: translateY(-2px);
    background: #ecfeff;
}

.premium-auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 56px rgba(15, 63, 58, 0.28);
}

.premium-auth-switch {
    margin-top: clamp(0.55rem, 1.6vh, 1.2rem);
    color: var(--premium-muted);
    text-align: center;
    font-weight: 800;
}

.premium-role-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: clamp(0.65rem, 1.7vh, 1.35rem);
    border: 1px solid rgba(15, 118, 110, 0.08);
    border-radius: 1.25rem;
    background: rgba(236, 254, 255, 0.55);
    padding: 0.45rem;
}

.premium-role-toggle button {
    display: inline-flex;
    min-height: clamp(2.45rem, 5.2vh, 2.85rem);
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 0.95rem;
    color: var(--premium-muted);
    font-weight: 950;
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.premium-role-toggle button.is-active {
    background: #fff;
    color: var(--premium-teal-dark);
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.12);
}

.premium-step-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.premium-step-progress span {
    height: 0.42rem;
    border-radius: 9999px;
    background: #e0f2fe;
}

.premium-step-progress span.is-active {
    background: linear-gradient(90deg, var(--premium-teal-dark), var(--premium-cyan));
}

.premium-settings-page {
    display: grid;
    gap: 1rem;
}

.premium-settings-messages {
    display: grid;
    gap: 0.75rem;
}

.premium-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.25rem);
}

.premium-settings-card {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.82);
    padding: clamp(1rem, 2vw, 1.45rem);
    box-shadow: var(--premium-shadow);
    backdrop-filter: blur(20px);
}

.premium-settings-wide,
.premium-settings-actions {
    grid-column: 1 / -1;
}

.premium-settings-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.premium-settings-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #ecfeff, #f0fdfa);
    color: var(--premium-teal-dark);
    font-size: 1.1rem;
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.1);
}

.premium-settings-card h2 {
    color: var(--premium-ink);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 950;
    letter-spacing: -0.045em;
}

.premium-settings-card-header p:not(.premium-kicker) {
    margin-top: 0.3rem;
    color: var(--premium-muted);
    font-weight: 650;
    line-height: 1.55;
}

.premium-profile-uploader {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(15, 118, 110, 0.08);
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(236, 254, 255, 0.7), rgba(255, 255, 255, 0.8));
    padding: 1rem;
}

.premium-profile-avatar {
    position: relative;
    display: grid;
    width: 5.5rem;
    height: 5.5rem;
    flex: 0 0 auto;
    place-items: center;
    overflow: visible;
    border: 4px solid #fff;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--premium-teal-dark), var(--premium-navy));
    color: #fff !important;
    font-size: 2rem;
    font-weight: 950 !important;
    box-shadow: 0 18px 38px rgba(15, 63, 58, 0.18);
    cursor: pointer;
}

.premium-profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.premium-profile-camera {
    position: absolute;
    right: -0.15rem;
    bottom: 0.1rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 9999px;
    background: #ccfbf1;
    color: var(--premium-teal-dark);
    font-size: 0.78rem;
}

.premium-profile-uploader h3 {
    color: var(--premium-ink);
    font-size: 1.1rem;
    font-weight: 950;
}

.premium-profile-uploader p {
    color: var(--premium-muted);
    font-weight: 750;
    overflow-wrap: anywhere;
}

.premium-profile-uploader span:not(.premium-profile-camera) {
    display: inline-flex;
    margin-top: 0.45rem;
    color: var(--premium-teal-dark);
    font-size: 0.82rem;
    font-weight: 850;
}

.premium-settings-fields {
    display: grid;
    gap: 1rem;
}

.premium-stripe-status {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: flex-start;
    border-radius: 1.5rem;
    padding: 1rem;
}

.premium-stripe-status > i {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    font-size: 1.15rem;
}

.premium-stripe-status strong {
    display: block;
    color: var(--premium-ink);
    font-size: 1rem;
    font-weight: 950;
}

.premium-stripe-status span,
.premium-stripe-status p {
    display: block;
    margin-top: 0.25rem;
    color: var(--premium-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.premium-stripe-status button,
.premium-stripe-status a {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 0.8rem;
    border-radius: 0.9rem;
    background: var(--premium-teal-dark);
    padding: 0.75rem 1rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 950;
    text-decoration: none;
}

.premium-stripe-success {
    border: 1px solid rgba(22, 163, 74, 0.18);
    background: #f0fdf4;
}

.premium-stripe-success > i {
    color: #16a34a;
}

.premium-stripe-warning {
    border: 1px solid rgba(217, 119, 6, 0.18);
    background: #fffbeb;
}

.premium-stripe-warning > i {
    color: #d97706;
}

.premium-stripe-danger {
    border: 1px solid rgba(220, 38, 38, 0.18);
    background: #fef2f2;
}

.premium-stripe-danger > i {
    color: #dc2626;
}

.premium-stripe-danger a {
    background: #dc2626;
}

.premium-stripe-info {
    border: 1px solid rgba(14, 165, 233, 0.18);
    background: #f0f9ff;
}

.premium-stripe-info > i {
    color: #0284c7;
}

.premium-manual-stripe {
    border: 1px dashed rgba(15, 118, 110, 0.2);
    border-radius: 1.25rem;
    background: rgba(236, 254, 255, 0.36);
    padding: 1rem;
}

.premium-manual-stripe summary {
    color: var(--premium-teal-dark);
    font-weight: 950;
    cursor: pointer;
}

.premium-manual-stripe .premium-field {
    margin-top: 1rem;
}

.premium-manual-stripe p {
    color: var(--premium-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.premium-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem;
    box-shadow: 0 18px 44px rgba(15, 118, 110, 0.08);
    backdrop-filter: blur(18px);
}

.premium-settings-actions .premium-btn-secondary,
.premium-settings-actions .premium-auth-submit {
    min-width: 11rem;
}

@media (max-width: 1023px) {
    .premium-auth-layout,
    .premium-auth-layout-register,
    .premium-auth-layout-compact {
        height: 100%;
        width: min(100%, 42rem);
        grid-template-columns: 1fr;
    }

    .premium-auth-visual {
        min-height: auto;
    }

    .premium-auth-visual-content {
        min-height: auto;
        padding: 1.35rem;
    }

    .premium-auth-visual h2 {
        max-width: 14ch;
        font-size: clamp(2rem, 7vw, 3rem);
    }

    .premium-auth-showcase {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .premium-auth-showcase div {
        display: block;
    }

    .premium-auth-showcase i {
        margin-bottom: 0.65rem;
    }

    .premium-auth-card {
        min-height: auto;
        height: 100%;
    }
}

@media (max-width: 640px) {
    .premium-public-shell {
        padding: 0.55rem;
    }

    .premium-public-logo {
        gap: 0.55rem;
        min-height: 2.55rem;
        padding-right: 0.75rem;
        font-size: 0.78rem;
    }

    .premium-public-main {
        min-height: 0;
        padding-top: 0.45rem;
    }

    .premium-auth-visual {
        display: none;
    }

    .premium-auth-card {
        justify-content: center;
        padding: clamp(0.72rem, 1.8vh, 1rem);
        border-radius: clamp(1.05rem, 4vw, 1.45rem);
    }

    .premium-auth-layout-register .premium-auth-card {
        justify-content: space-between;
    }

    .premium-auth-header {
        text-align: left;
    }

    .premium-auth-header h1 {
        font-size: clamp(1.55rem, 6.6vw, 2rem);
        letter-spacing: -0.05em;
    }

    .premium-auth-header p:not(.premium-kicker) {
        margin-left: 0;
        margin-right: 0;
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .premium-auth-stats {
        grid-template-columns: 1fr;
    }

    .premium-auth-layout-register .premium-auth-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .premium-auth-layout:not(.premium-auth-layout-register) .premium-auth-grid {
        grid-template-columns: 1fr;
    }

    .premium-auth-form {
        gap: 0.55rem;
        margin-top: 0.55rem;
    }

    .premium-field {
        gap: 0.26rem;
    }

    .premium-field label,
    .premium-field-row a,
    .premium-check-row,
    .premium-auth-switch {
        font-size: 0.78rem;
    }

    .premium-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .premium-field select,
    .premium-field textarea {
        min-height: 2.45rem;
        padding: 0.55rem 0.72rem !important;
        font-size: 0.86rem;
    }

    .premium-auth-alert {
        padding: 0.62rem 0.7rem;
        font-size: 0.8rem;
    }

    .premium-auth-submit {
        min-height: 2.55rem;
        border-radius: 0.82rem;
        font-size: 0.88rem;
    }

    .premium-field-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .premium-role-toggle {
        z-index: 2;
        margin-top: 0.45rem;
        gap: 0.35rem;
        padding: 0.3rem;
        backdrop-filter: blur(16px);
    }

    .premium-role-toggle button {
        min-height: 2.35rem;
        border-radius: 0.78rem;
        font-size: 0.86rem;
    }

    .premium-settings-grid {
        grid-template-columns: 1fr;
    }

    .premium-settings-card {
        border-radius: 1.45rem;
        padding: 1rem;
    }

    .premium-settings-card-header,
    .premium-profile-uploader,
    .premium-stripe-status {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .premium-profile-uploader {
        align-items: flex-start;
    }

    .premium-settings-actions {
        position: sticky;
        bottom: 0.75rem;
        z-index: 5;
        flex-direction: column;
    }

    .premium-settings-actions .premium-btn-secondary,
    .premium-settings-actions .premium-auth-submit {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .premium-auth-layout-register .premium-auth-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.42rem;
    }

    .premium-auth-layout-register .premium-auth-header p:not(.premium-kicker) {
        display: none;
    }
}

@media (max-height: 760px) {
    .premium-public-logo {
        min-height: 2.45rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .premium-auth-visual-content {
        padding: clamp(1rem, 3vh, 1.75rem);
    }

    .premium-auth-visual h2 {
        margin-top: 0.8rem;
        font-size: clamp(1.95rem, 6vh, 3.1rem);
    }

    .premium-auth-visual p {
        margin-top: 0.75rem;
        line-height: 1.45;
    }

    .premium-auth-showcase {
        gap: 0.55rem;
        margin-top: 1rem;
    }

    .premium-auth-showcase div {
        padding: 0.68rem;
    }

    .premium-auth-header h1 {
        font-size: clamp(1.55rem, 5.2vh, 2.45rem);
    }

    .premium-auth-header p:not(.premium-kicker) {
        margin-top: 0.45rem;
        line-height: 1.35;
    }

    .premium-auth-stats {
        gap: 0.45rem;
        margin: 0.75rem 0;
    }

    .premium-auth-stats span {
        padding: 0.52rem 0.45rem;
        font-size: 0.66rem;
    }

    .premium-auth-icon {
        width: 3.15rem;
        height: 3.15rem;
        border-radius: 1rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 640px) and (max-height: 760px) {
    .premium-auth-stats,
    .premium-auth-layout-register .premium-auth-header p:not(.premium-kicker) {
        display: none;
    }

    .premium-auth-layout-register .premium-auth-header h1 {
        margin-top: 0.15rem;
    }

    .premium-auth-layout-register .premium-auth-switch {
        margin-top: 0.25rem;
    }
}

@media (max-height: 650px) {
    .premium-auth-visual p,
    .premium-auth-layout-register .premium-kicker,
    .premium-auth-layout-register .premium-check-row span,
    .premium-auth-icon {
        display: none;
    }

    .premium-auth-layout-register .premium-field label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .premium-auth-card {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .premium-auth-form {
        gap: 0.45rem;
    }
}

.premium-form-card,
.premium-form-panel,
.premium-payment-card {
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 2rem;
    background: var(--premium-surface);
    box-shadow: var(--premium-shadow);
    backdrop-filter: blur(20px);
}

.premium-form-panel {
    padding: 1.35rem;
}

.premium-form-panel h2,
.premium-payment-card h2 {
    color: var(--premium-ink);
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.premium-form-panel p,
.premium-payment-card p {
    margin-top: 0.45rem;
    color: var(--premium-muted);
    font-weight: 650;
    line-height: 1.6;
}

.premium-payment-card {
    padding: 1.5rem;
}

.premium-payment-amount {
    margin: 1rem 0;
    color: var(--premium-teal-dark);
    font-size: 2.7rem;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.premium-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.45rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.premium-status-completed,
.premium-status-paid,
.premium-status-success {
    background: #dcfce7;
    color: #15803d;
}

.premium-status-pending,
.premium-status-processing {
    background: #fef3c7;
    color: #b45309;
}

.premium-status-failed,
.premium-status-cancelled,
.premium-status-canceled {
    background: #fee2e2;
    color: #dc2626;
}

.premium-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 80;
    display: grid;
    gap: 0.75rem;
}

.premium-toast {
    max-width: min(22rem, calc(100vw - 2rem));
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 850;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
    animation: premiumToastIn 220ms ease-out;
}

.premium-toast-success {
    background: linear-gradient(135deg, #059669, #0f766e);
}

.premium-toast-error {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.premium-toast-exit {
    animation: premiumToastOut 260ms ease-in forwards;
}

@keyframes premiumToastIn {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes premiumToastOut {
    to {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

.premium-chat-input {
    min-width: 0;
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.premium-chat-input:focus {
    border-color: var(--premium-teal);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.premium-chat-send {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 1rem;
    background: var(--premium-teal-dark);
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 63, 58, 0.22);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    border-color: rgba(15, 118, 110, 0.14) !important;
    border-radius: 1rem !important;
    background-color: rgba(255, 255, 255, 0.82) !important;
    color: var(--premium-ink) !important;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.05);
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: var(--premium-teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12), 0 14px 28px rgba(15, 118, 110, 0.08) !important;
}

label {
    color: var(--premium-teal-dark) !important;
    font-weight: 850 !important;
}

main .bg-white,
main .bg-zinc-100,
main .bg-gray-50,
main .bg-stone-50,
.shadow-sm,
.shadow-md,
.shadow-lg {
    border-color: rgba(15, 118, 110, 0.09);
}

main .bg-white.rounded-lg,
main .bg-white.rounded-xl,
main .bg-white.rounded-2xl,
main .bg-zinc-100.rounded-lg,
main .bg-zinc-100.rounded-xl,
main .bg-zinc-100.rounded-2xl {
    border: 1px solid rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 20px 44px rgba(15, 118, 110, 0.08) !important;
    backdrop-filter: blur(18px);
}

table {
    overflow: hidden;
    border-radius: 1.3rem;
}

thead,
thead.bg-zinc-100 {
    background: linear-gradient(135deg, #ecfeff, #f8fafc) !important;
}

th {
    color: var(--premium-teal-dark) !important;
    font-weight: 950 !important;
}

tbody tr {
    transition: background-color 160ms ease;
}

tbody tr:hover {
    background: rgba(236, 254, 255, 0.62) !important;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--premium-teal) !important;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .premium-dashboard-main,
    body .md\:ml-64 {
        margin-left: 18rem !important;
    }

    body .md\:ml-54 {
        margin-left: 18rem !important;
    }

    body .lg\:ml-64 {
        margin-left: 18rem !important;
    }

    .premium-dashboard-content {
        padding: 1.5rem;
    }
}

@media (max-width: 767px) {
    .premium-sidebar-mobile-toggle {
        display: inline-flex;
    }

    .premium-sidebar {
        width: min(20rem, 88vw);
    }

    .premium-topbar,
    .premium-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-profile-chip {
        display: none;
    }

    main,
    .premium-dashboard-content {
        padding-top: 4rem !important;
    }
}

/* Premium retrofit for existing standalone templates */
body > .container,
body > section,
body > .flex,
body > .main-content-wrapper {
    position: relative;
}

header.bg-white,
header.bg-zinc-50,
.md\:hidden.bg-\[\#FFFCF5\],
.flex.items-center.justify-between.p-4.bg-\[\#FFFCF5\] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.78) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 18px 42px rgba(15, 118, 110, 0.08) !important;
    backdrop-filter: blur(20px);
}

.font-urbanist.bg-\[\#F9F5ED\] .bg-white,
.font-urbanist.bg-\[\#F9F5ED\] .rounded-xl,
.font-urbanist.bg-\[\#F9F5ED\] .rounded-\[10px\] {
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 2rem !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 28px 70px rgba(15, 118, 110, 0.14) !important;
    backdrop-filter: blur(20px);
}

.font-urbanist.bg-\[\#F9F5ED\] img.object-cover {
    filter: saturate(1.06) contrast(1.02);
}

.font-urbanist.bg-\[\#F9F5ED\] h1,
.font-urbanist.bg-stone-50 h1,
.font-urbanist.bg-zinc-50 h1,
.font-urbanist.bg-background-main h1 {
    letter-spacing: -0.035em;
}

.font-urbanist.bg-zinc-50 main,
.font-urbanist.bg-background-main main,
.font-urbanist.bg-stone-50 main {
    background:
        radial-gradient(circle at 0 0, rgba(45, 212, 191, 0.12), transparent 24rem),
        radial-gradient(circle at 100% 18%, rgba(14, 165, 233, 0.1), transparent 24rem);
}

.font-urbanist.bg-zinc-50 main > .w-full,
.font-urbanist.bg-zinc-50 main > div,
.font-urbanist.bg-background-main main > div,
.font-urbanist.bg-stone-50 main > div {
    position: relative;
}

.font-urbanist.bg-zinc-50 h2,
.font-urbanist.bg-background-main h2,
.font-urbanist.bg-stone-50 h2 {
    color: var(--premium-teal-dark) !important;
    font-weight: 950 !important;
}

a[href*="all-products"],
a[href*="add-new"],
a[href*="buyer-dashboard"],
a[href*="seller-dashboard"],
a[href*="purchase"],
button[type="submit"],
button[onclick*="purchase"],
button[onclick*="addToCart"],
button[onclick*="clearCart"] {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

a[href*="all-products"]:hover,
a[href*="add-new"]:hover,
a[href*="buyer-dashboard"]:hover,
a[href*="seller-dashboard"]:hover,
a[href*="purchase"]:hover,
button[type="submit"]:hover,
button[onclick*="purchase"]:hover,
button[onclick*="addToCart"]:hover,
button[onclick*="clearCart"]:hover {
    transform: translateY(-2px);
}

.add-to-cart-btn,
button[onclick*="addToCart"] {
    border-color: rgba(15, 118, 110, 0.16) !important;
}

.text-teal-900 {
    color: var(--premium-teal-dark) !important;
}

.bg-teal-900 {
    background: linear-gradient(135deg, var(--premium-teal-dark), var(--premium-navy)) !important;
}

.hover\:bg-teal-800:hover,
.hover\:bg-teal-700:hover {
    background: linear-gradient(135deg, #0f766e, var(--premium-teal-dark)) !important;
}

.border-teal-900 {
    border-color: var(--premium-teal-dark) !important;
}

.text-red-500,
.text-red-600,
.text-red-700 {
    color: #dc2626 !important;
}

.bg-red-100,
.bg-red-50 {
    border: 1px solid rgba(220, 38, 38, 0.16);
    background: #fef2f2 !important;
}

.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > .bg-white,
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > .bg-white,
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > .bg-white {
    overflow: hidden;
    border-radius: 2rem !important;
}

.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > .bg-white img,
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > .bg-white img {
    transition: transform 260ms ease;
}

.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > .bg-white:hover img,
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > .bg-white:hover img {
    transform: scale(1.045);
}

.col-span-full.text-center.py-12,
.text-center.py-12,
.text-center.py-16 {
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--premium-shadow);
    backdrop-filter: blur(18px);
}

.table-dropdown-container,
.overflow-x-auto {
    border-radius: 1.5rem;
}

.table-dropdown-container table,
.overflow-x-auto table {
    background: rgba(255, 255, 255, 0.88);
}

.chat-item,
[id="messagesContainer"] > div,
#chatMessages > div {
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.chat-item:hover {
    transform: translateX(2px);
    background: #ecfeff !important;
}

#messagesContainer,
#chatMessages {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 118, 110, 0.35) transparent;
}

input[type="file"] {
    width: 100%;
    border: 1px dashed rgba(15, 118, 110, 0.28);
    border-radius: 1.25rem;
    background: rgba(236, 254, 255, 0.45);
    padding: 0.9rem;
    color: var(--premium-muted);
    font-weight: 700;
}

.modal-content,
.modal-overlay .bg-white,
[role="dialog"] {
    border-radius: 2rem !important;
}

.fixed[id*="Dropdown"],
[id^="dropdown-"],
#dropdownMenu {
    border: 1px solid rgba(15, 118, 110, 0.1) !important;
    border-radius: 1.2rem !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.14) !important;
    overflow: hidden;
}

#dropdownMenu {
    position: absolute !important;
    z-index: 9999 !important;
}

#confirmModal.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#confirmModal.modal-overlay.hidden {
    display: none !important;
}

#confirmModal .modal-content {
    position: relative !important;
    z-index: 100000 !important;
}

/* TayaproMED-inspired Vortex theme retrofit */
body {
    font-family: "Geist", "Urbanist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background:
        radial-gradient(circle at 8% -6%, rgba(0, 87, 168, 0.14), transparent 28rem),
        radial-gradient(circle at 96% 8%, rgba(41, 153, 102, 0.11), transparent 30rem),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 44%, #eef7ff 100%) !important;
    color: var(--premium-ink);
}

.premium-page,
.premium-app-bg,
.premium-public-bg,
.font-urbanist.bg-zinc-50 main,
.font-urbanist.bg-background-main main,
.font-urbanist.bg-stone-50 main {
    background:
        radial-gradient(circle at 5% 0%, rgba(0, 87, 168, 0.13), transparent 28rem),
        radial-gradient(circle at 100% 12%, rgba(41, 153, 102, 0.1), transparent 30rem),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 52%, #eef7ff 100%) !important;
}

.ambient-blob-one {
    background: rgba(0, 87, 168, 0.24) !important;
}

.ambient-blob-two {
    background: rgba(41, 153, 102, 0.2) !important;
}

.premium-nav,
header.bg-white,
header.bg-zinc-50,
.premium-topbar,
.premium-page-header,
.premium-sidebar,
.premium-auth-card,
.premium-form-card,
.premium-settings-card,
.premium-payment-card,
.product-card-premium,
.col-span-full.text-center.py-12,
.text-center.py-12,
.text-center.py-16 {
    border-color: rgba(0, 87, 168, 0.12) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 251, 255, 0.88)) !important;
    box-shadow: 0 24px 60px rgba(0, 87, 168, 0.1) !important;
}

.premium-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 247, 255, 0.92)),
        radial-gradient(circle at 0% 0%, rgba(0, 87, 168, 0.14), transparent 20rem) !important;
}

.premium-link::after,
.premium-sidebar-link.is-active::before {
    background: linear-gradient(90deg, var(--vortex-med-blue), var(--vortex-med-amber)) !important;
}

.premium-link:hover,
.premium-kicker,
.premium-sidebar-link:hover,
.premium-sidebar-link.is-active,
.premium-sidebar-mobile-toggle,
.premium-mobile-menu-button,
.text-teal-600,
.text-teal-700,
.text-teal-800,
.text-teal-900,
.hover\:text-teal-700:hover,
.hover\:text-teal-600:hover {
    color: var(--vortex-med-blue) !important;
}

.premium-logo-mark,
.premium-button-primary,
.card-primary-action,
.premium-sidebar-cta,
.chatbot-toggle,
.chatbot-header,
.bg-teal-900,
.bg-teal-800,
.bg-teal-700,
.hover\:bg-teal-800:hover,
.hover\:bg-teal-700:hover,
.hover\:bg-teal-600:hover {
    background: linear-gradient(135deg, var(--vortex-med-blue), var(--vortex-med-navy)) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 38px rgba(0, 87, 168, 0.22) !important;
}

.premium-button-secondary,
.card-secondary-action,
.bg-teal-50,
.bg-cyan-50,
.premium-sidebar-icon,
.product-subtype,
.product-trust-row span,
.product-price {
    border-color: rgba(0, 87, 168, 0.12) !important;
    background: #eef7ff !important;
    color: var(--vortex-med-blue) !important;
}

.border-teal-900,
.border-teal-800,
.border-teal-700,
.border-teal-600,
.border-teal-500,
.border-teal-900\/10,
.border-teal-900\/15,
.border-teal-900\/20 {
    border-color: rgba(0, 87, 168, 0.18) !important;
}

.ring-teal-500,
.focus\:ring-teal-500:focus,
.focus\:border-teal-500:focus {
    --tw-ring-color: rgba(0, 87, 168, 0.38) !important;
    border-color: var(--vortex-med-blue) !important;
}

.hero-title,
.premium-page-title,
h1,
h2,
h3 {
    letter-spacing: -0.045em;
}

.hero-title,
.premium-page-title {
    color: #0b1724 !important;
}

.hero-copy,
.premium-page-subtitle,
.product-description,
.product-meta,
.premium-muted,
.text-slate-500,
.text-gray-500 {
    color: #56636f !important;
}

.product-card-premium {
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 87, 168, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 251, 255, 0.97)) !important;
}

.product-card:hover,
.product-card-premium:hover,
.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden:hover,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden:hover {
    border-color: rgba(0, 87, 168, 0.24) !important;
    box-shadow: 0 32px 72px rgba(0, 87, 168, 0.16) !important;
}

.product-card:hover .product-title,
.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden:hover h3,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden:hover h3 {
    color: var(--vortex-med-blue) !important;
}

.product-image-link,
.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden > a:first-child,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden > a:first-child {
    background:
        radial-gradient(circle at 70% 20%, rgba(232, 135, 19, 0.16), transparent 28%),
        radial-gradient(circle at 22% 0%, rgba(0, 87, 168, 0.16), transparent 34%),
        linear-gradient(135deg, #eef7ff, #ffffff 52%, #fff7ed) !important;
}

.product-type-badge,
.premium-sidebar-badge,
.bg-amber-100,
.bg-yellow-100 {
    border-color: rgba(232, 135, 19, 0.22) !important;
    background: rgba(255, 247, 237, 0.94) !important;
    color: #9a4d00 !important;
}

.product-placeholder-service,
.product-placeholder-general,
.bg-emerald-50,
.bg-green-50 {
    background: linear-gradient(135deg, #e9f8f1, #eef7ff) !important;
    color: var(--vortex-med-success) !important;
}

.product-placeholder-book,
.product-placeholder-course,
.product-placeholder-webinar {
    background: linear-gradient(135deg, #eef7ff, #ffffff) !important;
    color: var(--vortex-med-blue) !important;
}

.product-save-button:hover {
    box-shadow: 0 18px 34px rgba(232, 135, 19, 0.18) !important;
}

.add-to-cart-btn,
button[onclick*="addToCart"],
.card-icon-action {
    border-color: rgba(0, 87, 168, 0.16) !important;
    background: #eef7ff !important;
    color: var(--vortex-med-blue) !important;
}

.add-to-cart-btn:hover,
button[onclick*="addToCart"]:hover,
.card-icon-action:hover {
    background: var(--vortex-med-blue) !important;
    color: #ffffff !important;
}

.chatbot-messages {
    background: linear-gradient(180deg, #ffffff, #eef7ff) !important;
}

.chat-item:hover {
    background: #eef7ff !important;
}

input[type="file"],
input,
select,
textarea {
    accent-color: var(--vortex-med-blue);
}

input[type="file"] {
    border-color: rgba(0, 87, 168, 0.25) !important;
    background: rgba(238, 247, 255, 0.65) !important;
}

.stars,
.text-yellow-400,
.text-amber-500 {
    color: var(--vortex-med-amber) !important;
}

.bg-gradient-to-r.from-red-500.to-orange-500,
.bg-red-500,
.bg-orange-500 {
    background: linear-gradient(135deg, var(--vortex-med-amber), #d97706) !important;
}

@media (max-width: 768px) {
    .premium-sidebar,
    .chatbot-widget,
    .product-card-premium {
        border-radius: 1.4rem !important;
    }
}

/* TayaproMED component system: typography, density, cards, forms, buttons */
:root {
    --tm-bg: #ffffff;
    --tm-app-bg: #f6fbff;
    --tm-surface: #ffffff;
    --tm-surface-soft: #f8fbff;
    --tm-text: #111827;
    --tm-muted: #586574;
    --tm-primary: #0057a8;
    --tm-primary-hover: #004985;
    --tm-primary-soft: #eef7ff;
    --tm-success: #299966;
    --tm-accent: #e88713;
    --tm-border: #d9e5f2;
    --tm-ring: rgba(0, 87, 168, 0.28);
    --tm-radius-sm: 0.5rem;
    --tm-radius: 0.75rem;
    --tm-radius-lg: 1rem;
    --tm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --tm-shadow: 0 8px 24px rgba(0, 87, 168, 0.08);
    --tm-shadow-lg: 0 18px 44px rgba(0, 87, 168, 0.12);
}

html {
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
.font-urbanist,
.font-\['Urbanist'\],
.font-sans {
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
    line-height: 1.55;
    background: linear-gradient(180deg, var(--tm-bg) 0%, var(--tm-app-bg) 100%) !important;
}

h1,
h2,
h3,
h4,
.premium-page-title,
.hero-title,
.product-title {
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--tm-text) !important;
    font-weight: 780 !important;
    letter-spacing: -0.035em !important;
}

h1,
.hero-title {
    font-weight: 820 !important;
}

p,
li,
small,
.product-description,
.product-meta,
.premium-page-subtitle,
.hero-copy {
    color: var(--tm-muted);
}

/* Layout shell: TayaproMED is clean SaaS, not glass-heavy */
.premium-page,
.premium-app-bg,
.premium-public-bg,
.font-urbanist.bg-zinc-50 main,
.font-urbanist.bg-background-main main,
.font-urbanist.bg-stone-50 main,
main {
    background:
        radial-gradient(circle at 85% 0%, rgba(0, 87, 168, 0.06), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 55%, #f3f8fe 100%) !important;
}

.premium-nav,
header.bg-white,
header.bg-zinc-50,
.premium-topbar,
.premium-page-header {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    backdrop-filter: blur(12px);
}

header.bg-white,
header.bg-zinc-50 {
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
}

/* Buttons: compact rounded-md shadcn/TayaproMED feel */
button,
a[role="button"],
.premium-button,
.premium-auth-submit,
.premium-sidebar-cta,
.premium-sidebar-logout,
.card-primary-action,
.card-secondary-action,
.card-icon-action,
.view-all-link,
a[href*="all-products"],
a[href*="add-new"],
a[href*="buyer-dashboard"],
a[href*="seller-dashboard"],
a[href*="purchase"],
button[type="submit"] {
    border-radius: var(--tm-radius) !important;
    font-family: "Geist", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 680 !important;
    letter-spacing: -0.01em;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease !important;
}

.premium-button,
.premium-auth-submit,
.card-primary-action,
.card-secondary-action,
.premium-sidebar-cta,
.premium-sidebar-logout,
button[type="submit"] {
    min-height: 2.5rem !important;
    padding: 0.62rem 0.95rem !important;
}

.premium-button-primary,
.premium-auth-submit,
.card-primary-action,
.premium-sidebar-cta,
.bg-teal-900,
.bg-teal-800,
.bg-teal-700,
button[type="submit"] {
    border: 1px solid var(--tm-primary) !important;
    background: var(--tm-primary) !important;
    color: #ffffff !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.premium-button-primary:hover,
.premium-auth-submit:hover,
.card-primary-action:hover,
.premium-sidebar-cta:hover,
.bg-teal-900:hover,
.bg-teal-800:hover,
.bg-teal-700:hover,
button[type="submit"]:hover {
    background: var(--tm-primary-hover) !important;
    border-color: var(--tm-primary-hover) !important;
    box-shadow: 0 8px 18px rgba(0, 87, 168, 0.18) !important;
    transform: translateY(-1px) !important;
}

.premium-button-secondary,
.card-secondary-action,
.premium-sidebar-logout,
button:not([type="submit"]):not(.chatbot-toggle):not(.product-save-button):not(.add-to-cart-btn):not(.card-icon-action) {
    border: 1px solid var(--tm-border) !important;
    background: #ffffff !important;
    color: var(--tm-text) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.premium-button-secondary:hover,
.card-secondary-action:hover,
.premium-sidebar-logout:hover {
    border-color: rgba(0, 87, 168, 0.35) !important;
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
}

.card-icon-action,
.add-to-cart-btn,
button[onclick*="addToCart"] {
    min-height: 2.5rem !important;
    width: 2.5rem !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.card-icon-action:hover,
.add-to-cart-btn:hover,
button[onclick*="addToCart"]:hover {
    background: var(--tm-primary) !important;
    color: #ffffff !important;
}

/* Cards: flatter white panels, crisp border, smaller radius */
.premium-auth-card,
.premium-auth-visual,
.premium-form-card,
.premium-settings-card,
.premium-payment-card,
.premium-topbar,
.premium-page-header,
.product-card-premium,
.benefit-card,
.empty-state,
main .bg-white.rounded-lg,
main .bg-white.rounded-xl,
main .bg-white.rounded-2xl,
.col-span-full.text-center.py-12,
.text-center.py-12,
.text-center.py-16 {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    background: var(--tm-surface) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    backdrop-filter: none !important;
}

.premium-auth-card:hover,
.premium-form-card:hover,
.premium-settings-card:hover,
.premium-payment-card:hover,
.product-card-premium:hover,
.benefit-card:hover,
main .bg-white.rounded-lg:hover,
main .bg-white.rounded-xl:hover,
main .bg-white.rounded-2xl:hover {
    border-color: rgba(0, 87, 168, 0.24) !important;
    box-shadow: var(--tm-shadow) !important;
}

/* Product cards: clinical marketplace cards */
.product-grid-marketplace {
    gap: 1rem !important;
}

.product-card-premium {
    overflow: hidden;
    transform: none !important;
}

.product-card-premium:hover {
    transform: translateY(-3px) !important;
}

.product-image-link,
.grid > .bg-white.rounded-lg.shadow-sm.overflow-hidden > a:first-child,
.grid > .bg-white.rounded-2xl.border.border-teal-900\/10.shadow-sm.overflow-hidden > a:first-child {
    height: 12rem !important;
    background:
        linear-gradient(135deg, #eef7ff 0%, #ffffff 58%, #fff8ee 100%) !important;
}

.product-card-shine,
.ambient-blob,
.hero-orbit {
    opacity: 0.35 !important;
}

.product-body {
    padding: 1rem !important;
}

.product-title {
    min-height: 2.7rem !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
}

.product-description {
    min-height: 2.35rem !important;
    font-size: 0.85rem !important;
}

.product-type-badge,
.product-subtype,
.product-price,
.product-trust-row span,
.product-meta span,
.premium-auth-pill,
.premium-auth-stats span,
.premium-sidebar-badge {
    border: 1px solid var(--tm-border) !important;
    border-radius: 999px !important;
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

.product-price {
    background: #ffffff !important;
    color: var(--tm-text) !important;
}

.product-type-badge,
.bg-amber-100,
.bg-yellow-100 {
    border-color: rgba(232, 135, 19, 0.25) !important;
    background: #fff7ed !important;
    color: #9a4d00 !important;
}

.product-save-button {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: var(--tm-radius) !important;
    border: 1px solid var(--tm-border) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

/* Forms: TayaproMED/shadcn field styling */
label,
.premium-field label {
    color: #344054 !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.premium-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.premium-code-field input,
.premium-chat-input {
    min-height: 2.65rem !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    background: #ffffff !important;
    color: var(--tm-text) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    font-family: "Geist", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 500 !important;
}

textarea {
    min-height: 7rem !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.premium-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.premium-chat-input:focus {
    border-color: var(--tm-primary) !important;
    box-shadow: 0 0 0 4px var(--tm-ring) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #98a2b3 !important;
}

/* Sidebar: TayaproMED dashboard rail */
.premium-sidebar {
    border-right: 1px solid var(--tm-border) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.premium-logo-mark,
.premium-avatar,
.premium-auth-icon {
    border-radius: var(--tm-radius) !important;
    background: var(--tm-primary) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.premium-sidebar-link {
    min-height: 2.55rem !important;
    border-radius: var(--tm-radius) !important;
    color: #475467 !important;
    font-weight: 650 !important;
}

.premium-sidebar-link:hover,
.premium-sidebar-link.is-active {
    transform: none !important;
    border-color: rgba(0, 87, 168, 0.16) !important;
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
    box-shadow: none !important;
}

.premium-sidebar-link.is-active::before {
    left: -0.15rem !important;
    height: 1.35rem !important;
    width: 0.18rem !important;
    background: var(--tm-primary) !important;
}

.premium-sidebar-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    border-radius: var(--tm-radius-sm) !important;
    background: #ffffff !important;
    color: var(--tm-primary) !important;
}

.premium-sidebar-user,
.premium-profile-chip {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    background: var(--tm-surface-soft) !important;
    box-shadow: none !important;
}

/* Auth pages: clean split SaaS panel */
.premium-auth-layout,
.premium-auth-layout-register,
.premium-auth-layout-compact {
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.premium-auth-visual {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.18), transparent 18rem),
        linear-gradient(135deg, var(--tm-primary) 0%, #06365f 100%) !important;
    color: #ffffff !important;
}

.premium-auth-visual h2,
.premium-auth-visual p,
.premium-auth-showcase strong,
.premium-auth-showcase span {
    color: #ffffff !important;
}

.premium-auth-showcase div,
.premium-auth-code-preview {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--tm-radius) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.premium-auth-card {
    padding: clamp(1rem, 2vw, 1.6rem) !important;
}

.premium-auth-header h1 {
    font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
}

.premium-role-toggle {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    background: var(--tm-surface-soft) !important;
    padding: 0.25rem !important;
}

.premium-role-toggle button {
    border-radius: calc(var(--tm-radius) - 0.2rem) !important;
}

.premium-role-toggle button.is-active {
    background: #ffffff !important;
    color: var(--tm-primary) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

/* Chatbot: small clinical assistant widget */
.chatbot-toggle {
    width: 3.35rem !important;
    height: 3.35rem !important;
    border-radius: var(--tm-radius-lg) !important;
    background: var(--tm-primary) !important;
    box-shadow: var(--tm-shadow-lg) !important;
}

.chatbot-widget {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    background: #ffffff !important;
    box-shadow: var(--tm-shadow-lg) !important;
    overflow: hidden;
}

.chatbot-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--tm-primary) !important;
}

.chatbot-messages {
    background: var(--tm-surface-soft) !important;
}

.chat-bubble,
.chat-bubble-ai,
.chat-bubble-user {
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.chat-bubble-ai {
    border: 1px solid var(--tm-border) !important;
    background: #ffffff !important;
    color: var(--tm-text) !important;
}

.chat-bubble-user {
    background: var(--tm-primary) !important;
    color: #ffffff !important;
}

/* Utility color migration from teal to medical blue */
.text-teal-50,
.text-teal-100,
.text-teal-200,
.text-teal-300,
.text-teal-400,
.text-teal-500,
.text-teal-600,
.text-teal-700,
.text-teal-800,
.text-teal-900,
.hover\:text-teal-700:hover,
.hover\:text-teal-600:hover {
    color: var(--tm-primary) !important;
}

.bg-teal-50,
.bg-cyan-50,
.bg-blue-50 {
    background: var(--tm-primary-soft) !important;
}

.text-emerald-700,
.text-green-700,
.text-green-600,
.text-emerald-600 {
    color: var(--tm-success) !important;
}

.bg-emerald-50,
.bg-green-50 {
    background: #edf8f3 !important;
}

.text-amber-700,
.text-yellow-700,
.text-yellow-600,
.text-amber-600,
.stars,
.text-yellow-400,
.text-amber-500 {
    color: var(--tm-accent) !important;
}

/* Tables and dropdowns */
.overflow-x-auto,
.table-dropdown-container,
#dropdownMenu,
.fixed[id*="Dropdown"],
[id^="dropdown-"] {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    background: #ffffff !important;
    box-shadow: var(--tm-shadow) !important;
}

table th {
    color: #475467 !important;
    font-size: 0.78rem !important;
    font-weight: 720 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

table td {
    color: var(--tm-text) !important;
    font-weight: 500;
}

@media (max-width: 768px) {
    .premium-nav,
    .premium-topbar,
    .premium-page-header,
    .premium-auth-card,
    .premium-form-card,
    .premium-settings-card,
    .premium-payment-card,
    .product-card-premium,
    .chatbot-widget {
        border-radius: var(--tm-radius) !important;
    }

    .premium-auth-card {
        padding: 1rem !important;
    }

    .product-image-link {
        height: 11rem !important;
    }
}

/* Structural TayaproMED clone pass: real layout primitives */
.tm-page {
    --tm-container: 80rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #eef7ff 100%) !important;
}

.tm-site-nav {
    border-bottom: 1px solid var(--tm-border) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    backdrop-filter: blur(16px);
}

.tm-nav-inner {
    min-height: 4.25rem;
}

.tm-brand,
.tm-brand:hover {
    color: var(--tm-text) !important;
    text-decoration: none;
}

.tm-brand-mark {
    border: 1px solid rgba(0, 87, 168, 0.18) !important;
    border-radius: 0.75rem !important;
    background: var(--tm-primary) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.tm-nav-links a,
.tm-nav-links .premium-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    border-radius: 0.6rem;
    padding: 0.45rem 0.75rem;
    color: #475467 !important;
    font-weight: 600 !important;
}

.tm-nav-links .premium-link::after {
    display: none !important;
}

.tm-nav-links a:hover,
.tm-nav-links .premium-link:hover {
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
}

.tm-btn {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.65rem;
    padding: 0.62rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 680;
    letter-spacing: -0.01em;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease;
}

.tm-btn-lg {
    min-height: 3rem;
    padding: 0.8rem 1.15rem;
    font-size: 0.98rem;
}

.tm-btn-primary {
    border: 1px solid var(--tm-primary);
    background: var(--tm-primary);
    color: #ffffff !important;
    box-shadow: var(--tm-shadow-sm);
}

.tm-btn-primary:hover {
    transform: translateY(-1px);
    border-color: var(--tm-primary-hover);
    background: var(--tm-primary-hover);
    box-shadow: 0 8px 18px rgba(0, 87, 168, 0.18);
}

.tm-btn-outline,
.tm-btn-ghost {
    border: 1px solid var(--tm-border);
    background: #ffffff;
    color: var(--tm-text) !important;
    box-shadow: var(--tm-shadow-sm);
}

.tm-btn-ghost {
    border-color: transparent;
    box-shadow: none;
}

.tm-btn-outline:hover,
.tm-btn-ghost:hover {
    border-color: rgba(0, 87, 168, 0.24);
    background: var(--tm-primary-soft);
    color: var(--tm-primary) !important;
}

.tm-hero {
    background:
        radial-gradient(circle at 78% 8%, rgba(0, 87, 168, 0.08), transparent 26rem),
        radial-gradient(circle at 15% 5%, rgba(41, 153, 102, 0.06), transparent 24rem);
}

.tm-eyebrow {
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: #ffffff;
    padding: 0.45rem 0.75rem;
    color: var(--tm-primary);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: var(--tm-shadow-sm);
}

.tm-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--tm-success);
    box-shadow: 0 0 0 4px rgba(41, 153, 102, 0.12);
}

.tm-hero-title {
    max-width: 52rem;
    font-size: clamp(2.5rem, 6vw, 4.9rem) !important;
    line-height: 0.96 !important;
    font-weight: 830 !important;
    letter-spacing: -0.065em !important;
}

.tm-hero-copy {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem) !important;
    line-height: 1.75 !important;
    color: #586574 !important;
}

.tm-stat-grid {
    max-width: 42rem;
}

.tm-stat,
.stat-chip {
    border: 1px solid var(--tm-border) !important;
    border-radius: 0.9rem !important;
    background: #ffffff !important;
    padding: 0.95rem !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.tm-stat:hover,
.stat-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 87, 168, 0.28) !important;
    box-shadow: var(--tm-shadow) !important;
}

.tm-stat span,
.stat-chip span {
    color: var(--tm-primary) !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
}

.tm-stat small,
.stat-chip small {
    color: #667085 !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

.tm-preview-card {
    border: 1px solid var(--tm-border);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: var(--tm-shadow-lg);
}

.tm-preview-topbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-bottom: 1px solid var(--tm-border);
    padding: 0.8rem 1rem;
    background: #ffffff;
}

.tm-preview-topbar span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: #d0d5dd;
}

.tm-preview-topbar span:first-child {
    background: #ef4444;
}

.tm-preview-topbar span:nth-child(2) {
    background: var(--tm-accent);
}

.tm-preview-topbar span:nth-child(3) {
    background: var(--tm-success);
}

.tm-preview-topbar strong {
    margin-left: 0.55rem;
    color: #475467;
    font-size: 0.8rem;
    font-weight: 700;
}

.tm-preview-panel {
    margin: 1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--tm-primary), var(--tm-primary-hover));
    padding: 1.4rem;
    color: #ffffff;
}

.tm-preview-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.floating-card {
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 0.9rem !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12) !important;
    animation: none !important;
}

.floating-card strong {
    color: var(--tm-primary) !important;
}

.category-strip,
.benefit-card,
.product-section > div > .section-heading,
.glass-panel {
    border: 1px solid var(--tm-border) !important;
    border-radius: 1rem !important;
    background: #ffffff !important;
    box-shadow: var(--tm-shadow-sm) !important;
    backdrop-filter: none !important;
}

.category-strip {
    padding: 0.75rem !important;
}

.category-shortcut {
    border-radius: 0.8rem !important;
    border: 1px solid transparent !important;
    background: #ffffff !important;
}

.category-shortcut:hover {
    border-color: var(--tm-border) !important;
    background: var(--tm-primary-soft) !important;
    transform: none !important;
}

.category-shortcut-icon,
.benefit-icon,
.card-icon {
    border-radius: 0.7rem !important;
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
}

.section-kicker {
    color: var(--tm-primary) !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.14em !important;
}

.section-title {
    color: var(--tm-text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
}

.section-subtitle {
    color: #586574 !important;
}

.count-badge,
.view-all-link {
    border: 1px solid var(--tm-border) !important;
    border-radius: 0.65rem !important;
    background: #ffffff !important;
    color: var(--tm-primary) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.view-all-link:hover {
    background: var(--tm-primary) !important;
    color: #ffffff !important;
}

/* Standalone marketplace/dashboard pages that do not extend shared shell */
.tm-standalone-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 46%, #eef7ff 100%) !important;
}

.tm-standalone-page .flex.h-screen.overflow-hidden,
.tm-standalone-page .flex.min-h-screen {
    background: transparent !important;
}

.tm-listing-header {
    border-bottom: 1px solid var(--tm-border) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    backdrop-filter: blur(14px);
}

.tm-page-eyebrow {
    margin-bottom: 0.15rem;
    color: var(--tm-primary);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tm-search-input,
.tm-filter-button {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    background: #ffffff !important;
    color: var(--tm-text) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.tm-search-input:focus,
.tm-filter-button:focus {
    border-color: var(--tm-primary) !important;
    box-shadow: 0 0 0 4px var(--tm-ring) !important;
}

.tm-standalone-page main {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 87, 168, 0.06), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.tm-standalone-page h1,
.tm-standalone-page h2 {
    color: var(--tm-text) !important;
    font-weight: 800 !important;
}

.tm-standalone-page h2::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 0.18rem;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: var(--tm-primary);
}

.tm-standalone-page .grid > .bg-white,
.tm-standalone-page .product-card,
.tm-standalone-page .product-card-premium {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    background: #ffffff !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.tm-standalone-page .grid > .bg-white:hover,
.tm-standalone-page .product-card:hover,
.tm-standalone-page .product-card-premium:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 87, 168, 0.24) !important;
    box-shadow: var(--tm-shadow) !important;
}

/* Final rhythm polish: spacing, hierarchy, and touch-safe density */
:root {
    --tm-page-gutter: clamp(1rem, 3.2vw, 2rem);
    --tm-section-y: clamp(3rem, 6vw, 5.25rem);
    --tm-section-y-compact: clamp(1.75rem, 4vw, 3rem);
    --tm-card-pad: clamp(1rem, 2vw, 1.35rem);
    --tm-panel-pad: clamp(1.25rem, 3vw, 2.25rem);
}

.tm-page,
.tm-standalone-page,
.premium-app-bg,
.premium-public-shell,
.premium-dashboard-shell {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    letter-spacing: -0.006em;
    text-rendering: geometricPrecision;
}

.tm-page .font-black,
.tm-standalone-page .font-black,
.premium-app-bg .font-black,
.premium-public-shell .font-black,
.premium-dashboard-shell .font-black {
    font-weight: 720 !important;
}

.tm-page .font-extrabold,
.tm-standalone-page .font-extrabold,
.premium-app-bg .font-extrabold,
.premium-public-shell .font-extrabold,
.premium-dashboard-shell .font-extrabold {
    font-weight: 680 !important;
}

.tm-page .font-bold,
.tm-standalone-page .font-bold,
.premium-app-bg .font-bold,
.premium-public-shell .font-bold,
.premium-dashboard-shell .font-bold {
    font-weight: 620 !important;
}

.tm-page .font-semibold,
.tm-standalone-page .font-semibold,
.premium-app-bg .font-semibold,
.premium-public-shell .font-semibold,
.premium-dashboard-shell .font-semibold {
    font-weight: 560 !important;
}

.tm-page [class*="tracking-["],
.tm-standalone-page [class*="tracking-["],
.premium-app-bg [class*="tracking-["],
.premium-public-shell [class*="tracking-["],
.premium-dashboard-shell [class*="tracking-["] {
    letter-spacing: 0.08em !important;
}

.tm-site-nav {
    min-height: 4.75rem;
}

.tm-nav-inner {
    padding-block: 0.85rem !important;
}

.tm-brand {
    gap: 0.75rem !important;
}

.tm-brand img,
.premium-sidebar-logo,
.premium-logo-mark {
    box-shadow: 0 8px 22px rgba(0, 87, 168, 0.12) !important;
}

.tm-nav-links a,
.premium-sidebar-link,
.tm-btn,
.premium-btn-primary,
.premium-btn-secondary,
.card-primary-action,
.card-secondary-action,
.view-all-link,
.count-badge {
    min-height: 2.65rem;
    align-items: center;
    font-weight: 620 !important;
}

.tm-hero {
    padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.25rem) !important;
}

.tm-hero > .mx-auto {
    gap: clamp(2rem, 4.5vw, 4rem) !important;
}

.tm-eyebrow,
.section-kicker,
.tm-page-eyebrow {
    margin-bottom: 0.85rem !important;
    letter-spacing: 0.11em !important;
    font-weight: 680 !important;
}

.tm-hero-title {
    max-width: 13ch;
    font-size: clamp(2.65rem, 6.2vw, 5.65rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.065em !important;
    font-weight: 760 !important;
}

.tm-hero-copy {
    max-width: 42rem !important;
    margin-top: clamp(1rem, 2.4vw, 1.45rem) !important;
    font-size: clamp(1rem, 1.25vw, 1.13rem) !important;
    line-height: 1.72 !important;
}

.tm-hero .tm-btn,
.premium-public-shell .tm-btn {
    padding: 0.9rem 1.15rem !important;
    border-radius: 0.9rem !important;
}

.tm-stat-grid {
    gap: 0.8rem !important;
    margin-top: clamp(1.4rem, 3.4vw, 2.4rem) !important;
}

.tm-stat,
.stat-chip {
    padding: 0.85rem 0.95rem !important;
}

.tm-stat span,
.stat-chip span {
    font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
    line-height: 1.05 !important;
}

.tm-preview-card {
    border-radius: 1.1rem !important;
}

.tm-preview-panel {
    margin: 0.85rem !important;
    padding: clamp(1rem, 2vw, 1.45rem) !important;
}

.floating-card {
    padding: 0.95rem !important;
}

#marketplace,
#ai-discovery,
.product-section,
#contact {
    padding-inline: var(--tm-page-gutter) !important;
}

#marketplace {
    padding-block: var(--tm-section-y-compact) !important;
}

#ai-discovery,
.product-section,
#contact {
    padding-block: var(--tm-section-y) !important;
}

.category-strip {
    gap: 0.75rem !important;
    padding: 0.7rem !important;
    border-radius: 1.1rem !important;
}

.category-shortcut {
    min-height: 5.7rem;
    padding: 1rem !important;
}

.category-shortcut-icon,
.benefit-icon,
.card-icon {
    width: 2.65rem !important;
    height: 2.65rem !important;
    flex: 0 0 auto;
}

.benefit-card,
.glass-panel,
.product-section > div > .section-heading {
    padding: var(--tm-panel-pad) !important;
    border-radius: 1.1rem !important;
}

.product-section > div > .section-heading {
    margin-bottom: clamp(1.15rem, 2.8vw, 2rem) !important;
}

.section-title {
    font-size: clamp(1.85rem, 3vw, 2.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
    font-weight: 720 !important;
}

.section-subtitle {
    max-width: 42rem;
    margin-top: 0.55rem !important;
    font-size: clamp(0.96rem, 1.2vw, 1.05rem) !important;
    line-height: 1.65 !important;
}

.section-actions {
    gap: 0.65rem !important;
}

.count-badge,
.view-all-link {
    padding: 0.68rem 0.88rem !important;
    border-radius: 0.8rem !important;
}

.product-grid,
.premium-product-grid {
    gap: clamp(1rem, 2vw, 1.4rem) !important;
}

.product-card,
.product-card-premium,
.tm-standalone-page .grid > .bg-white {
    overflow: hidden;
    border-radius: 1.05rem !important;
}

.product-image-link,
.product-card .h-48,
.product-card-premium .h-48 {
    min-height: 11rem;
}

.product-image,
.product-card img,
.product-card-premium img {
    height: 11.25rem !important;
    object-fit: cover;
}

.product-body,
.product-card .p-5,
.product-card-premium .p-5,
.tm-standalone-page .grid > .bg-white > .p-5 {
    padding: var(--tm-card-pad) !important;
}

.product-title,
.product-card h3,
.product-card-premium h3 {
    margin-bottom: 0.55rem !important;
    color: var(--tm-text) !important;
    font-size: 1.04rem !important;
    line-height: 1.28 !important;
    letter-spacing: -0.022em !important;
    font-weight: 680 !important;
}

.product-meta,
.product-seller,
.trust-chip,
.reason-chip,
.product-card p,
.product-card-premium p {
    line-height: 1.5 !important;
}

.product-price,
.premium-price,
[class*="text-5xl"].text-teal-950 {
    font-weight: 720 !important;
    letter-spacing: -0.045em !important;
}

.product-actions {
    gap: 0.6rem !important;
    margin-top: 0.9rem !important;
}

.card-primary-action,
.card-secondary-action {
    border-radius: 0.78rem !important;
    padding: 0.72rem 0.85rem !important;
}

.empty-state-premium,
.col-span-full.text-center,
.text-center.py-12,
.text-center.py-16 {
    padding: clamp(2.25rem, 5vw, 4rem) var(--tm-panel-pad) !important;
    border-radius: 1.15rem !important;
}

.tm-listing-header .container,
.tm-listing-header .mx-auto,
.premium-topbar-inner {
    padding-block: 0.9rem !important;
}

.tm-standalone-page main,
.premium-dashboard-main,
.premium-public-main {
    padding: clamp(1rem, 3vw, 1.8rem) !important;
}

.tm-standalone-page section,
.premium-dashboard-main section {
    margin-bottom: clamp(1.5rem, 3.4vw, 2.5rem) !important;
}

.premium-sidebar,
.premium-sidebar-panel {
    padding: 1rem !important;
}

.premium-sidebar-link {
    gap: 0.75rem !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 0.85rem !important;
}

.premium-page-header,
.premium-card,
.dashboard-card,
.form-panel,
.payment-summary-card,
.premium-table-wrap,
.premium-public-card {
    padding: var(--tm-panel-pad) !important;
    border-radius: 1.15rem !important;
}

.premium-page-header h1,
.tm-standalone-page h1 {
    font-size: clamp(2rem, 4vw, 3.15rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    font-weight: 740 !important;
}

.premium-page-header p,
.tm-standalone-page header p,
.premium-public-card p {
    line-height: 1.65 !important;
}

.premium-input,
.premium-select,
.premium-textarea,
.tm-search-input,
.tm-filter-button,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    min-height: 2.8rem;
    border-radius: 0.78rem !important;
}

#contact .rounded-\[2rem\] {
    border-radius: 1.15rem !important;
}

#contact form {
    gap: 1rem !important;
    padding: var(--tm-panel-pad) !important;
}

footer {
    padding-block: clamp(2rem, 4vw, 3rem) !important;
}

#chatbotToggle {
    right: max(1rem, env(safe-area-inset-right)) !important;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
}

#chatbotWindow {
    right: max(1rem, env(safe-area-inset-right)) !important;
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.75rem) !important;
}

@media (max-width: 1023px) {
    .tm-site-nav {
        min-height: 4.25rem;
    }

    .tm-hero-title {
        max-width: 14ch;
    }

    .tm-preview-card {
        max-width: 42rem;
        margin-inline: auto;
    }

    .premium-dashboard-main,
    .tm-standalone-page main {
        padding-inline: 1rem !important;
    }
}

@media (max-width: 767px) {
    :root {
        --tm-section-y: 2.65rem;
        --tm-section-y-compact: 1.4rem;
        --tm-card-pad: 0.95rem;
        --tm-panel-pad: 1.05rem;
    }

    .tm-nav-inner {
        padding-block: 0.65rem !important;
    }

    .tm-hero {
        padding-top: 2.65rem !important;
    }

    .tm-hero-title {
        font-size: clamp(2.35rem, 13vw, 3.55rem) !important;
        letter-spacing: -0.055em !important;
    }

    .tm-hero-copy {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }

    .tm-hero .mt-8,
    .tm-stat-grid {
        margin-top: 1.15rem !important;
    }

    .tm-stat {
        padding: 0.78rem !important;
    }

    .category-shortcut {
        min-height: auto;
    }

    .section-heading,
    .product-section > div > .section-heading {
        align-items: flex-start !important;
    }

    .section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .product-image,
    .product-card img,
    .product-card-premium img {
        height: 10.5rem !important;
    }

    .premium-page-header,
    .premium-card,
    .dashboard-card,
    .form-panel,
    .payment-summary-card,
    .premium-table-wrap,
    .premium-public-card {
        padding: 1rem !important;
    }

    #chatbotToggle {
        transform: scale(0.92);
        transform-origin: bottom right;
    }

    #chatbotWindow {
        width: calc(100vw - 1.25rem) !important;
        max-width: none !important;
        right: 0.625rem !important;
    }
}

/* EOF winning override: dashboard welcome line should feel refined, not heavy */
.tm-standalone-page .tm-listing-header h1,
.premium-dashboard-shell .premium-page-header h1,
.premium-dashboard-shell .premium-page-title {
    color: var(--tm-text) !important;
    font-size: clamp(1.05rem, 1.8vw, 1.32rem) !important;
    font-weight: 560 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.026em !important;
}

.tm-standalone-page .tm-listing-header h1 span,
.premium-dashboard-shell .premium-page-header h1 span,
.premium-dashboard-shell .premium-page-title span {
    color: var(--tm-primary) !important;
    font-weight: 660 !important;
}

.tm-standalone-page .tm-listing-header p,
.premium-dashboard-shell .premium-page-header p,
.premium-dashboard-shell .premium-page-subtitle {
    margin-top: 0.2rem !important;
    color: #667085 !important;
    font-size: 0.82rem !important;
    font-weight: 440 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.004em !important;
}

.tm-standalone-page main h2,
.tm-standalone-page main h2.font-black,
.tm-standalone-page main h2.font-bold {
    font-weight: 650 !important;
    letter-spacing: -0.035em !important;
}

/* EOF advanced motion priority layer */
.tm-scroll-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--tm-primary), #03a9f4, #10b981, var(--tm-primary)) !important;
    background-size: 220% 100% !important;
    transform: scaleX(0);
    transform-origin: left center !important;
    animation: tmBorderRun 4.5s linear infinite !important;
    pointer-events: none !important;
}

.tm-motion-ready .tm-motion-target {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
}

.tm-motion-ready .tm-motion-target.tm-motion-visible {
    animation: tmRevealAdvanced 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--tm-reveal-delay, 0ms) both !important;
}

.tm-tilt-card {
    --tm-pointer-x: 50%;
    --tm-pointer-y: 50%;
    --tm-rotate-x: 0deg;
    --tm-rotate-y: 0deg;
    --tm-parallax-x: 0px;
    --tm-parallax-y: 0px;
    position: relative !important;
    isolation: isolate !important;
    transform: perspective(900px) rotateX(var(--tm-rotate-x)) rotateY(var(--tm-rotate-y)) translate3d(0, 0, 0) !important;
    transform-style: preserve-3d !important;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease, border-color 320ms ease !important;
}

.tm-tilt-card::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--tm-pointer-x) var(--tm-pointer-y), rgba(255, 255, 255, 0.72), transparent 24%),
        radial-gradient(circle at var(--tm-pointer-x) var(--tm-pointer-y), rgba(3, 169, 244, 0.18), transparent 38%);
    opacity: 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.tm-tilt-card.tm-tilt-active::before {
    opacity: 1;
}

.tm-tilt-card.tm-tilt-active {
    box-shadow: 0 30px 70px rgba(0, 87, 168, 0.16), 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

.tm-tilt-card > * {
    position: relative;
    z-index: 2;
}

.product-card.tm-tilt-active .product-image,
.product-card-premium.tm-tilt-active img {
    transform: scale(1.09) translate3d(var(--tm-parallax-x), var(--tm-parallax-y), 0) !important;
}

.tm-magnetic {
    --tm-magnetic-x: 0px;
    --tm-magnetic-y: 0px;
    transform: translate3d(var(--tm-magnetic-x), var(--tm-magnetic-y), 0) !important;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, background-color 220ms ease !important;
}

.tm-hero-title {
    background: linear-gradient(105deg, #0b1220 0%, var(--tm-primary) 38%, #03a9f4 56%, #0b1220 86%) !important;
    background-size: 240% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    animation: tmHeroGradientFlow 10s ease-in-out infinite !important;
}

.tm-listing-header::after,
.premium-page-header::after,
.tm-preview-card::after,
.category-strip::after,
.section-heading::after {
    animation: tmBorderRun 7s linear infinite !important;
}

.tm-stat,
.floating-card,
.tm-preview-icon {
    animation: tmFloatComplex 7.5s ease-in-out infinite !important;
}

#chatbotToggle {
    animation: tmChatBreath 4.2s ease-in-out infinite !important;
}

#chatbotWidget:not(.hidden),
.chatbot-widget:not(.hidden) {
    animation: tmRevealAdvanced 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.tm-reduced-motion .tm-motion-target,
.tm-reduced-motion .tm-motion-visible,
.tm-reduced-motion .tm-tilt-card,
.tm-reduced-motion .tm-magnetic,
.tm-reduced-motion #chatbotToggle {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
/* TRUE EOF floating AI-orb background activation layer */
html,
body {
    background: #ffffff !important;
}

.tm-page,
.tm-standalone-page,
.premium-public-shell,
.premium-dashboard-shell,
.premium-dashboard-layout,
.premium-app-bg {
    position: relative !important;
    isolation: isolate !important;
    overflow-x: clip !important;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9)),
        radial-gradient(circle at 12% 10%, rgba(3, 169, 244, 0.08), transparent 25rem),
        radial-gradient(circle at 90% 20%, rgba(16, 185, 129, 0.07), transparent 27rem),
        #ffffff !important;
}

.tm-page::before,
.tm-standalone-page::before,
.premium-public-shell::before,
.premium-dashboard-shell::before,
.premium-dashboard-layout::before,
.premium-app-bg::before {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: auto !important;
    height: auto !important;
    content: "" !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(0, 87, 168, 0.14) 0 0.18rem, transparent 0.23rem),
        radial-gradient(circle at 72% 32%, rgba(3, 169, 244, 0.13) 0 0.16rem, transparent 0.22rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 87, 168, 0.045) 47.2% 47.6%, transparent 47.8% 100%),
        linear-gradient(28deg, transparent 0 52%, rgba(16, 185, 129, 0.04) 52.2% 52.55%, transparent 52.8% 100%) !important;
    background-size: 7.5rem 7.5rem, 9rem 9rem, 15rem 15rem, 18rem 18rem !important;
    opacity: 0.38 !important;
    filter: none !important;
    transform: none !important;
    animation: tmNeuralShimmer 24s linear infinite alternate !important;
    pointer-events: none !important;
}

.tm-page::after,
.tm-standalone-page::after,
.premium-public-shell::after,
.premium-dashboard-shell::after,
.premium-dashboard-layout::after,
.premium-app-bg::after {
    position: fixed !important;
    inset: auto auto -12rem -9rem !important;
    z-index: 0 !important;
    width: clamp(24rem, 42vw, 44rem) !important;
    height: clamp(24rem, 42vw, 44rem) !important;
    content: "" !important;
    border-radius: 44% 56% 62% 38% / 48% 42% 58% 52% !important;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.78), transparent 17%),
        radial-gradient(circle at 45% 42%, rgba(3, 169, 244, 0.24), transparent 34%),
        radial-gradient(circle at 66% 64%, rgba(16, 185, 129, 0.19), transparent 38%),
        radial-gradient(circle at 44% 62%, rgba(0, 87, 168, 0.16), transparent 52%) !important;
    box-shadow:
        0 0 7rem rgba(3, 169, 244, 0.1),
        inset 0 0 5rem rgba(255, 255, 255, 0.42) !important;
    opacity: 0.82 !important;
    filter: blur(26px) saturate(1.12) !important;
    animation: tmOrbDriftSlow 28s ease-in-out infinite alternate, tmOrbPulseSubtle 10s ease-in-out infinite !important;
    pointer-events: none !important;
}

.tm-hero::before,
.premium-dashboard-main::before,
.tm-standalone-page main::before,
.premium-public-shell main::before {
    position: fixed !important;
    top: clamp(5rem, 12vh, 8rem) !important;
    right: clamp(-10rem, -12vw, -5rem) !important;
    z-index: 0 !important;
    width: clamp(20rem, 34vw, 36rem) !important;
    height: clamp(20rem, 34vw, 36rem) !important;
    content: "" !important;
    border-radius: 58% 42% 51% 49% / 45% 58% 42% 55% !important;
    background:
        radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.86), transparent 16%),
        radial-gradient(circle at 48% 48%, rgba(0, 87, 168, 0.18), transparent 35%),
        radial-gradient(circle at 66% 62%, rgba(3, 169, 244, 0.22), transparent 42%),
        radial-gradient(circle at 42% 70%, rgba(16, 185, 129, 0.14), transparent 48%) !important;
    filter: blur(24px) saturate(1.18) !important;
    opacity: 0.78 !important;
    animation: tmOrbDriftSlow 32s ease-in-out infinite alternate-reverse !important;
    pointer-events: none !important;
}

.tm-page > *,
.tm-standalone-page > *,
.premium-public-shell > *,
.premium-dashboard-shell > *,
.premium-dashboard-layout > *,
.premium-app-bg > * {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .tm-page::before,
    .tm-page::after,
    .tm-standalone-page::before,
    .tm-standalone-page::after,
    .premium-public-shell::before,
    .premium-public-shell::after,
    .premium-dashboard-shell::before,
    .premium-dashboard-shell::after,
    .premium-dashboard-layout::before,
    .premium-dashboard-layout::after,
    .premium-app-bg::before,
    .premium-app-bg::after,
    .tm-hero::before,
    .premium-dashboard-main::before,
    .tm-standalone-page main::before,
    .premium-public-shell main::before {
        animation: none !important;
    }
}
/* TRUE EOF visibility boost: put the floating theme on visible page surfaces */
.tm-page,
.tm-standalone-page,
.premium-dashboard-main,
.premium-dashboard-content,
.premium-public-shell,
.premium-app-bg {
    background:
        radial-gradient(circle at 8% 18%, rgba(3, 169, 244, 0.18), transparent 18rem),
        radial-gradient(circle at 88% 10%, rgba(16, 185, 129, 0.16), transparent 20rem),
        radial-gradient(circle at 78% 72%, rgba(0, 87, 168, 0.12), transparent 24rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 252, 255, 0.9) 48%, rgba(255, 255, 255, 0.96)),
        #ffffff !important;
}

.tm-standalone-page main,
.premium-dashboard-main,
.premium-dashboard-content,
.premium-public-main {
    position: relative !important;
    isolation: isolate !important;
    background:
        radial-gradient(circle at 3% 8%, rgba(3, 169, 244, 0.16), transparent 16rem),
        radial-gradient(circle at 96% 12%, rgba(16, 185, 129, 0.14), transparent 18rem),
        radial-gradient(circle at 82% 90%, rgba(0, 87, 168, 0.11), transparent 24rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.92)),
        #ffffff !important;
}

.tm-page::before,
.tm-standalone-page::before,
.premium-public-shell::before,
.premium-dashboard-shell::before,
.premium-dashboard-layout::before,
.premium-app-bg::before {
    z-index: 1 !important;
    opacity: 0.58 !important;
}

.tm-page::after,
.tm-standalone-page::after,
.premium-public-shell::after,
.premium-dashboard-shell::after,
.premium-dashboard-layout::after,
.premium-app-bg::after {
    inset: auto auto -9rem -6rem !important;
    z-index: 1 !important;
    opacity: 0.98 !important;
    filter: blur(20px) saturate(1.2) !important;
}

.tm-hero::before,
.premium-dashboard-main::before,
.tm-standalone-page main::before,
.premium-public-shell main::before {
    z-index: 1 !important;
    opacity: 0.92 !important;
    filter: blur(18px) saturate(1.28) !important;
}

.tm-page > *,
.tm-standalone-page > *,
.premium-public-shell > *,
.premium-dashboard-shell > *,
.premium-dashboard-layout > *,
.premium-app-bg > *,
.tm-standalone-page main > *,
.premium-dashboard-main > *,
.premium-dashboard-content > *,
.premium-public-main > * {
    position: relative;
    z-index: 3;
}

.tm-site-nav,
.tm-listing-header,
.premium-sidebar,
.premium-sidebar-panel,
.premium-public-card,
.premium-page-header,
.premium-card,
.dashboard-card,
.form-panel,
.product-card,
.product-card-premium,
.category-strip,
.benefit-card,
.section-heading {
    background-color: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
}

@media (max-width: 767px) {
    .tm-page,
    .tm-standalone-page,
    .premium-dashboard-main,
    .premium-dashboard-content,
    .premium-public-shell,
    .premium-app-bg,
    .tm-standalone-page main,
    .premium-public-main {
        background:
            radial-gradient(circle at 0% 10%, rgba(3, 169, 244, 0.14), transparent 13rem),
            radial-gradient(circle at 100% 18%, rgba(16, 185, 129, 0.12), transparent 14rem),
            linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 252, 255, 0.95)),
            #ffffff !important;
    }
}

/* ABSOLUTE EOF visible floating AI theme overlay */
body::before,
body::after {
    position: fixed !important;
    content: "" !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
}

body::before {
    inset: 0 !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 132, 255, 0.18), transparent 17rem),
        radial-gradient(circle at 88% 12%, rgba(16, 185, 129, 0.16), transparent 18rem),
        radial-gradient(circle at 74% 80%, rgba(0, 87, 168, 0.13), transparent 22rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 132, 255, 0.055) 47.2% 47.45%, transparent 47.7% 100%),
        linear-gradient(28deg, transparent 0 55%, rgba(16, 185, 129, 0.045) 55.15% 55.45%, transparent 55.7% 100%) !important;
    background-size: auto, auto, auto, 18rem 18rem, 21rem 21rem !important;
    mix-blend-mode: multiply;
    opacity: 1 !important;
    animation: tmNeuralShimmer 26s linear infinite alternate !important;
}

body::after {
    right: -9rem !important;
    top: 7rem !important;
    width: clamp(18rem, 32vw, 34rem) !important;
    height: clamp(18rem, 32vw, 34rem) !important;
    border-radius: 44% 56% 62% 38% / 48% 42% 58% 52% !important;
    background:
        radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.82), transparent 16%),
        radial-gradient(circle at 45% 42%, rgba(0, 132, 255, 0.32), transparent 34%),
        radial-gradient(circle at 66% 64%, rgba(16, 185, 129, 0.24), transparent 38%),
        radial-gradient(circle at 44% 62%, rgba(0, 87, 168, 0.22), transparent 52%) !important;
    filter: blur(18px) saturate(1.25) !important;
    opacity: 0.74 !important;
    mix-blend-mode: multiply;
    animation: tmOrbDriftSlow 24s ease-in-out infinite alternate, tmOrbPulseSubtle 8s ease-in-out infinite !important;
}

@media (max-width: 767px) {
    body::before {
        background:
            radial-gradient(circle at 0% 18%, rgba(0, 132, 255, 0.14), transparent 12rem),
            radial-gradient(circle at 100% 14%, rgba(16, 185, 129, 0.12), transparent 12rem),
            radial-gradient(circle at 80% 88%, rgba(0, 87, 168, 0.1), transparent 16rem) !important;
    }

    body::after {
        right: -13rem !important;
        top: 8rem !important;
        width: 24rem !important;
        height: 24rem !important;
        opacity: 0.58 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }
}

/* ABSOLUTE EOF fix: keep floating theme behind content, never over it */
html,
body {
    min-height: 100%;
    background:
        radial-gradient(circle at 10% 14%, rgba(0, 132, 255, 0.16), transparent 18rem),
        radial-gradient(circle at 92% 12%, rgba(16, 185, 129, 0.14), transparent 19rem),
        radial-gradient(circle at 78% 82%, rgba(0, 87, 168, 0.11), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f7fcff 48%, #ffffff 100%) !important;
}

body {
    position: relative;
    isolation: isolate;
}

body::before,
body::after {
    pointer-events: none !important;
    z-index: 0 !important;
}

body::before {
    opacity: 0.42 !important;
    mix-blend-mode: multiply;
}

body::after {
    opacity: 0.48 !important;
    mix-blend-mode: multiply;
}

body > * {
    position: relative !important;
    z-index: 2 !important;
}

.tm-page,
.tm-standalone-page,
.premium-dashboard-main,
.premium-dashboard-content,
.premium-public-shell,
.premium-app-bg,
.tm-standalone-page main,
.premium-public-main {
    background-color: transparent !important;
}

.tm-site-nav,
.tm-listing-header,
.premium-sidebar,
.premium-sidebar-panel,
.premium-public-card,
.premium-page-header,
.premium-card,
.dashboard-card,
.form-panel,
.product-card,
.product-card-premium,
.category-strip,
.benefit-card,
.section-heading {
    position: relative !important;
    z-index: 3 !important;
    background-color: rgba(255, 255, 255, 0.88) !important;
}

/* ABSOLUTE EOF fix v2: no overlay pseudo-elements, animated background only */
@keyframes tmPageBackgroundDrift {
    0% {
        background-position: 0% 0%, 100% 0%, 70% 100%, 0 0, 0 0;
    }
    50% {
        background-position: 7% 4%, 92% 8%, 76% 92%, 4rem 3rem, -3rem 5rem;
    }
    100% {
        background-position: 2% 8%, 96% 4%, 64% 96%, 8rem 6rem, -6rem 10rem;
    }
}

html::before,
html::after,
body::before,
body::after {
    display: none !important;
    content: none !important;
}

html,
body {
    min-height: 100% !important;
    background-color: #ffffff !important;
    background-image:
        radial-gradient(circle at 9% 16%, rgba(0, 132, 255, 0.22), transparent 18rem),
        radial-gradient(circle at 90% 11%, rgba(16, 185, 129, 0.19), transparent 20rem),
        radial-gradient(circle at 78% 82%, rgba(0, 87, 168, 0.15), transparent 24rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 132, 255, 0.06) 47.2% 47.45%, transparent 47.7% 100%),
        linear-gradient(28deg, transparent 0 55%, rgba(16, 185, 129, 0.05) 55.15% 55.45%, transparent 55.7% 100%) !important;
    background-size: auto, auto, auto, 18rem 18rem, 21rem 21rem !important;
    background-attachment: fixed !important;
    animation: tmPageBackgroundDrift 28s ease-in-out infinite alternate !important;
}

body {
    position: static !important;
    isolation: auto !important;
    overflow-x: hidden !important;
}

body > * {
    position: relative !important;
    z-index: auto !important;
}

.tm-page,
.tm-standalone-page,
.premium-dashboard-layout,
.premium-dashboard-main,
.premium-dashboard-content,
.premium-public-shell,
.premium-app-bg,
.tm-standalone-page main,
.premium-public-main {
    background: transparent !important;
}

.tm-page > *,
.tm-standalone-page > *,
.premium-public-shell > *,
.premium-dashboard-shell > *,
.premium-dashboard-layout > *,
.premium-app-bg > *,
.tm-standalone-page main > *,
.premium-dashboard-main > *,
.premium-dashboard-content > *,
.premium-public-main > * {
    position: relative !important;
    z-index: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html,
    body {
        animation: none !important;
    }
}

/* ABSOLUTE EOF fix v3: never hide page content for reveal animations */
.tm-motion-ready .tm-motion-target,
.tm-motion-ready .tm-motion-target.tm-motion-visible,
.tm-motion-target,
.tm-motion-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.tm-motion-ready .tm-motion-target.tm-motion-visible {
    animation: none !important;
}

/* ABSOLUTE EOF v4: stable visible background, zero overlays, zero layout shift */
html,
body {
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background-color: #ffffff !important;
    background-image: none !important;
    animation: none !important;
}

body,
.tm-page,
.tm-standalone-page,
.premium-dashboard-layout,
.premium-dashboard-main,
.premium-dashboard-content,
.premium-public-shell,
.premium-app-bg,
.tm-standalone-page main,
.premium-public-main {
    position: relative !important;
    isolation: auto !important;
    transform: none !important;
}

body::before,
body::after,
html::before,
html::after,
.tm-page::before,
.tm-page::after,
.tm-standalone-page::before,
.tm-standalone-page::after,
.premium-public-shell::before,
.premium-public-shell::after,
.premium-dashboard-shell::before,
.premium-dashboard-shell::after,
.premium-dashboard-layout::before,
.premium-dashboard-layout::after,
.premium-app-bg::before,
.premium-app-bg::after,
.tm-hero::before,
.premium-dashboard-main::before,
.tm-standalone-page main::before,
.premium-public-shell main::before {
    display: none !important;
    content: none !important;
    animation: none !important;
}

.tm-page,
.tm-standalone-page,
.premium-dashboard-layout,
.premium-dashboard-main,
.premium-dashboard-content,
.premium-public-shell,
.premium-app-bg,
.tm-standalone-page main,
.premium-public-main {
    background-color: #ffffff !important;
    background-image:
        radial-gradient(circle at 8% 12%, rgba(0, 132, 255, 0.24), transparent 19rem),
        radial-gradient(circle at 92% 10%, rgba(16, 185, 129, 0.2), transparent 20rem),
        radial-gradient(circle at 82% 84%, rgba(0, 87, 168, 0.16), transparent 24rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 132, 255, 0.065) 47.2% 47.45%, transparent 47.7% 100%),
        linear-gradient(28deg, transparent 0 55%, rgba(16, 185, 129, 0.055) 55.15% 55.45%, transparent 55.7% 100%),
        linear-gradient(180deg, #ffffff 0%, #f7fcff 48%, #ffffff 100%) !important;
    background-size: auto, auto, auto, 18rem 18rem, 21rem 21rem, auto !important;
    background-position: center top, center top, center bottom, 0 0, 0 0, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat !important;
    animation: tmPageBackgroundDrift 34s ease-in-out infinite alternate !important;
}

.tm-page > *,
.tm-standalone-page > *,
.premium-public-shell > *,
.premium-dashboard-shell > *,
.premium-dashboard-layout > *,
.premium-app-bg > *,
.tm-standalone-page main > *,
.premium-dashboard-main > *,
.premium-dashboard-content > *,
.premium-public-main > * {
    position: relative !important;
    z-index: auto !important;
    transform: none !important;
}

.tm-motion-ready .tm-motion-target,
.tm-motion-ready .tm-motion-target.tm-motion-visible,
.tm-motion-target,
.tm-motion-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

.tm-site-nav,
.tm-listing-header,
.premium-sidebar,
.premium-sidebar-panel,
.premium-public-card,
.premium-page-header,
.premium-card,
.dashboard-card,
.form-panel,
.product-card,
.product-card-premium,
.category-strip,
.benefit-card,
.section-heading {
    background-color: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
}

@media (max-width: 767px) {
    .tm-page,
    .tm-standalone-page,
    .premium-dashboard-layout,
    .premium-dashboard-main,
    .premium-dashboard-content,
    .premium-public-shell,
    .premium-app-bg,
    .tm-standalone-page main,
    .premium-public-main {
        background-image:
            radial-gradient(circle at 0% 12%, rgba(0, 132, 255, 0.18), transparent 13rem),
            radial-gradient(circle at 100% 14%, rgba(16, 185, 129, 0.15), transparent 14rem),
            linear-gradient(180deg, #ffffff 0%, #f7fcff 55%, #ffffff 100%) !important;
        background-size: auto, auto, auto !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-page,
    .tm-standalone-page,
    .premium-dashboard-layout,
    .premium-dashboard-main,
    .premium-dashboard-content,
    .premium-public-shell,
    .premium-app-bg,
    .tm-standalone-page main,
    .premium-public-main {
        animation: none !important;
    }
}


/* ABSOLUTE FINAL BACKGROUND SAFETY: kill all overlay backgrounds permanently */
html::before,
html::after,
body::before,
body::after,
.premium-page::before,
.premium-page::after,
.tm-page::before,
.tm-page::after,
.tm-standalone-page::before,
.tm-standalone-page::after,
.premium-dashboard-layout::before,
.premium-dashboard-layout::after,
.premium-dashboard-main::before,
.premium-dashboard-main::after,
.premium-public-shell::before,
.premium-public-shell::after,
.tm-standalone-page main::before,
.tm-standalone-page main::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -999999 !important;
    animation: none !important;
    transform: none !important;
    pointer-events: none !important;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;
    background: #ffffff !important;
    overflow-x: hidden !important;
}

body.vortex-bg-active {
    background:
        radial-gradient(circle at 8% 12%, rgba(0, 132, 255, 0.26), transparent 19rem),
        radial-gradient(circle at 92% 10%, rgba(16, 185, 129, 0.22), transparent 20rem),
        radial-gradient(circle at 82% 84%, rgba(0, 87, 168, 0.17), transparent 24rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 132, 255, 0.07) 47.2% 47.45%, transparent 47.7% 100%),
        linear-gradient(28deg, transparent 0 55%, rgba(16, 185, 129, 0.06) 55.15% 55.45%, transparent 55.7% 100%),
        linear-gradient(180deg, #ffffff 0%, #f5fbff 52%, #ffffff 100%) !important;
    background-size: auto, auto, auto, 18rem 18rem, 21rem 21rem, auto !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat !important;
    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important;
}

body > *,
.tm-page,
.tm-page > *,
.tm-standalone-page,
.tm-standalone-page > *,
.premium-dashboard-layout,
.premium-dashboard-layout > *,
.premium-dashboard-main,
.premium-dashboard-main > *,
.premium-public-shell,
.premium-public-shell > * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* GLOBAL TYPOGRAPHY LOCK — matches the landing hero across every template.
   This lives in custom.css because every standalone page loads it. */
:root {
    --vortex-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vortex-heading-color: #0b1220;
    --vortex-body-color: #334155;
}

html,
body,
body *,
button,
input,
select,
textarea,
[class*="font-["],
[class*="font-\\["],
[class*="font-'"] {
    font-family: var(--vortex-font-sans) !important;
}

body {
    color: var(--vortex-body-color);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
.h1,
.page-title,
.premium-page-title,
.tm-hero-title {
    color: var(--vortex-heading-color) !important;
    font-family: var(--vortex-font-sans) !important;
    font-weight: 520 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.04 !important;
    text-wrap: balance;
}

h2,
.h2,
.section-title,
.tm-section-title,
.premium-section-title,
.dashboard-title {
    color: var(--vortex-heading-color) !important;
    font-family: var(--vortex-font-sans) !important;
    font-weight: 560 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.08 !important;
    text-wrap: balance;
}

h3,
.h3,
.card-title,
.product-title,
.premium-card-title {
    color: var(--vortex-heading-color) !important;
    font-family: var(--vortex-font-sans) !important;
    font-weight: 590 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
}

p,
li,
label,
small,
span,
input,
select,
textarea,
.text-body,
.section-subtitle,
.tm-section-subtitle,
.premium-muted,
.product-description {
    font-family: var(--vortex-font-sans) !important;
}

.tm-btn,
.premium-button,
.btn,
button,
.premium-nav-link,
.tm-nav-link,
.premium-sidebar-link,
.dashboard-nav-link {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 680 !important;
    letter-spacing: -0.012em !important;
}

pre,
code,
kbd,
samp,
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

@media (max-width: 767px) {
    h1,
    .h1,
    .page-title,
    .premium-page-title,
    .tm-hero-title {
        font-weight: 535 !important;
        letter-spacing: -0.042em !important;
        line-height: 1.08 !important;
    }

    h2,
    .h2,
    .section-title,
    .tm-section-title,
    .premium-section-title,
    .dashboard-title {
        letter-spacing: -0.036em !important;
    }
}

/* GLOBAL TYPOGRAPHY NORMALIZER — removes old heavy utility styling so text visually matches the hero language. */
body .font-black,
body .font-extrabold,
body .font-bold {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 620 !important;
    letter-spacing: -0.032em !important;
}

body .font-semibold {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 560 !important;
    letter-spacing: -0.018em !important;
}

body .font-medium {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 520 !important;
    letter-spacing: -0.012em !important;
}

body .font-normal,
body .font-light {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 450 !important;
    letter-spacing: -0.01em !important;
}

body h1.font-black,
body h1.font-extrabold,
body h1.font-bold,
body .tm-hero-title,
body .hero-word {
    font-weight: 520 !important;
    letter-spacing: -0.052em !important;
}

body h2.font-black,
body h2.font-extrabold,
body h2.font-bold,
body .section-title,
body .tm-section-title,
body .dashboard-title {
    font-weight: 560 !important;
    letter-spacing: -0.045em !important;
}

body h3.font-black,
body h3.font-extrabold,
body h3.font-bold,
body .product-title,
body .card-title,
body .premium-card-title {
    font-weight: 590 !important;
    letter-spacing: -0.03em !important;
}

body .hero-title-accent,
body .subtitle-emphasis {
    font-weight: 610 !important;
}

body .tm-btn,
body .premium-button,
body button,
body .btn,
body a[class*="button"],
body a.tm-btn {
    font-weight: 650 !important;
    letter-spacing: -0.018em !important;
}

body .section-kicker,
body .tm-eyebrow,
body .product-type-badge,
body .count-badge,
body .stat-chip small,
body [class*="tracking-"] {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 560 !important;
    letter-spacing: 0.035em !important;
}

body .stat-chip span,
body .product-price,
body .price,
body strong {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 620 !important;
    letter-spacing: -0.028em !important;
}

body .tm-preview-card h2,
body .tm-preview-card p,
body .tm-preview-card strong,
body .tm-preview-card span,
body .product-card h3,
body .product-card p,
body .product-card span,
body .benefit-card h3,
body .benefit-card p {
    font-family: var(--vortex-font-sans) !important;
}

@media (max-width: 767px) {
    body .font-black,
    body .font-extrabold,
    body .font-bold,
    body h1.font-black,
    body h1.font-extrabold,
    body h1.font-bold,
    body .tm-hero-title,
    body .hero-word {
        letter-spacing: -0.04em !important;
    }
}


/* PREMIUM PRODUCT CARD EXPERIENCE v2 — final card layer for landing, marketplace, dashboards, recommendations. */
:root {
    --vortex-card-radius: 1.55rem;
    --vortex-card-border: rgba(0, 87, 168, 0.13);
    --vortex-card-border-hover: rgba(3, 169, 244, 0.38);
    --vortex-card-shadow: 0 18px 52px rgba(8, 47, 73, 0.09);
    --vortex-card-shadow-hover: 0 30px 82px rgba(0, 87, 168, 0.18), 0 10px 26px rgba(16, 185, 129, 0.08);
}

@keyframes vortexCardGlowSweep {
    0% { transform: translateX(-130%) rotate(10deg); opacity: 0; }
    18% { opacity: 0.75; }
    48% { opacity: 0; transform: translateX(130%) rotate(10deg); }
    100% { opacity: 0; transform: translateX(130%) rotate(10deg); }
}

@keyframes vortexCardBadgePulse {
    0%, 100% { box-shadow: 0 10px 24px rgba(3, 169, 244, 0.08); }
    50% { box-shadow: 0 12px 30px rgba(16, 185, 129, 0.16); }
}

body.vortex-bg-active .product-grid,
body.vortex-bg-active .premium-product-grid,
body.vortex-bg-active .product-grid-marketplace {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)) !important;
    gap: clamp(1.15rem, 2.2vw, 1.85rem) !important;
    align-items: stretch;
}

body.vortex-bg-active .product-card,
body.vortex-bg-active .product-card-premium,
body.vortex-bg-active article[data-recommendation-card],
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white {
    position: relative !important;
    display: flex !important;
    min-height: 100%;
    flex-direction: column !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid var(--vortex-card-border) !important;
    border-radius: var(--vortex-card-radius) !important;
    background:
        radial-gradient(circle at 16% -8%, rgba(3, 169, 244, 0.15), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(16, 185, 129, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.92)) !important;
    box-shadow: var(--vortex-card-shadow) !important;
    transform: translate3d(0, 0, 0);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, background 0.32s ease !important;
}

body.vortex-bg-active .product-card::before,
body.vortex-bg-active .product-card-premium::before,
body.vortex-bg-active article[data-recommendation-card]::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl::before,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white::before,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,0.78) 47%, rgba(186,230,253,0.28) 54%, transparent 68%);
    opacity: 0;
    transform: translateX(-120%) rotate(10deg);
}

body.vortex-bg-active .product-card::after,
body.vortex-bg-active .product-card-premium::after,
body.vortex-bg-active article[data-recommendation-card]::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl::after,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white::after,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white::after {
    content: "";
    position: absolute;
    inset: auto 1.2rem 0 1.2rem;
    height: 0.22rem;
    z-index: 2;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #0057a8, #03a9f4, #10b981);
    opacity: 0.72;
    transform: scaleX(0.32);
    transform-origin: left center;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease;
}

body.vortex-bg-active .product-card:hover,
body.vortex-bg-active .product-card-premium:hover,
body.vortex-bg-active article[data-recommendation-card]:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover {
    border-color: var(--vortex-card-border-hover) !important;
    box-shadow: var(--vortex-card-shadow-hover) !important;
    transform: translate3d(0, -8px, 0) !important;
}

body.vortex-bg-active .product-card:hover::before,
body.vortex-bg-active .product-card-premium:hover::before,
body.vortex-bg-active article[data-recommendation-card]:hover::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover::before,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover::before,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover::before {
    animation: vortexCardGlowSweep 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.vortex-bg-active .product-card:hover::after,
body.vortex-bg-active .product-card-premium:hover::after,
body.vortex-bg-active article[data-recommendation-card]:hover::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover::after,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover::after,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

body.vortex-bg-active .product-image-link,
body.vortex-bg-active .product-card > a:first-child,
body.vortex-bg-active .product-card-premium > a:first-child,
body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > a:first-child,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > div:first-child,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > div:first-child {
    position: relative !important;
    display: block !important;
    min-height: 12.25rem !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 24% 22%, rgba(255,255,255,0.92), transparent 16%),
        radial-gradient(circle at 80% 10%, rgba(16,185,129,0.25), transparent 32%),
        linear-gradient(135deg, #eaf6ff 0%, #ffffff 45%, #ecfdf5 100%) !important;
}

body.vortex-bg-active .product-image,
body.vortex-bg-active .product-card img,
body.vortex-bg-active .product-card-premium img,
body.vortex-bg-active article[data-recommendation-card] img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white img {
    width: 100% !important;
    height: 12.25rem !important;
    object-fit: cover !important;
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.01);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease !important;
}

body.vortex-bg-active .product-card:hover img,
body.vortex-bg-active .product-card-premium:hover img,
body.vortex-bg-active article[data-recommendation-card]:hover img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white:hover img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover img {
    filter: saturate(1.13) contrast(1.05);
    transform: scale(1.075);
}

body.vortex-bg-active .product-placeholder,
body.vortex-bg-active article[data-recommendation-card] a > div,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a > div {
    min-height: 12.25rem !important;
    background:
        radial-gradient(circle at 34% 26%, rgba(3,169,244,0.22), transparent 28%),
        radial-gradient(circle at 72% 60%, rgba(16,185,129,0.19), transparent 28%),
        linear-gradient(135deg, #eef7ff, #ffffff 54%, #ecfdf5) !important;
    color: #0057a8 !important;
}

body.vortex-bg-active .product-placeholder i,
body.vortex-bg-active article[data-recommendation-card] a > div i {
    font-size: 2.4rem !important;
    filter: drop-shadow(0 12px 20px rgba(0, 87, 168, 0.16));
}

body.vortex-bg-active .product-body,
body.vortex-bg-active .product-card .p-4,
body.vortex-bg-active .product-card .p-5,
body.vortex-bg-active .product-card-premium .p-4,
body.vortex-bg-active .product-card-premium .p-5,
body.vortex-bg-active article[data-recommendation-card] > div:last-child,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-4,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-5,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > .p-4,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > .p-4 {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.08rem !important;
}

body.vortex-bg-active .product-type-badge,
body.vortex-bg-active article[data-recommendation-card] .rounded-full,
body.vortex-bg-active .product-subtype,
body.vortex-bg-active .reason-chip {
    border: 1px solid rgba(3, 169, 244, 0.16) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #075985 !important;
    box-shadow: 0 12px 28px rgba(0, 87, 168, 0.10) !important;
    backdrop-filter: blur(12px) saturate(1.12);
    font-weight: 650 !important;
    letter-spacing: 0.015em !important;
    animation: vortexCardBadgePulse 5.8s ease-in-out infinite;
}

body.vortex-bg-active .product-price,
body.vortex-bg-active article[data-recommendation-card] .text-teal-950,
body.vortex-bg-active article[data-recommendation-card] .text-sm.font-black.text-teal-950 {
    display: inline-flex !important;
    align-items: center;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(0, 87, 168, 0.12) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(238, 247, 255, 0.96), rgba(236, 253, 245, 0.86)) !important;
    color: #0057a8 !important;
    padding: 0.42rem 0.66rem !important;
    box-shadow: 0 10px 24px rgba(0, 87, 168, 0.08) !important;
    font-weight: 650 !important;
}

body.vortex-bg-active .product-title,
body.vortex-bg-active .product-card h3,
body.vortex-bg-active .product-card-premium h3,
body.vortex-bg-active article[data-recommendation-card] h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white h3 {
    color: #0b1220 !important;
    font-size: clamp(1.03rem, 0.35vw + 0.96rem, 1.18rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.034em !important;
    font-weight: 610 !important;
    transition: color 0.24s ease, transform 0.24s ease !important;
}

body.vortex-bg-active .product-card:hover .product-title,
body.vortex-bg-active .product-card-premium:hover .product-title,
body.vortex-bg-active article[data-recommendation-card]:hover h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white:hover h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover h3 {
    color: #0057a8 !important;
}

body.vortex-bg-active .product-description,
body.vortex-bg-active .product-meta,
body.vortex-bg-active article[data-recommendation-card] p,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white p {
    color: #526173 !important;
    font-size: 0.92rem !important;
    line-height: 1.58 !important;
    font-weight: 450 !important;
}

body.vortex-bg-active .product-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    margin-top: 0.66rem !important;
}

body.vortex-bg-active .product-meta span,
body.vortex-bg-active .product-trust-row span,
body.vortex-bg-active article[data-recommendation-card] .text-cyan-800,
body.vortex-bg-active article[data-recommendation-card] .text-slate-500:last-child {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    border: 1px solid rgba(0, 87, 168, 0.08) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #475569 !important;
    padding: 0.34rem 0.55rem;
    font-size: 0.78rem !important;
    font-weight: 560 !important;
}

body.vortex-bg-active .product-rating,
body.vortex-bg-active .product-trust-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.62rem !important;
    margin-top: 0.72rem !important;
}

body.vortex-bg-active .product-rating span:not(.stars) {
    color: #0f3a55 !important;
    font-size: 0.88rem !important;
    font-weight: 650 !important;
}

body.vortex-bg-active .stars,
body.vortex-bg-active .text-yellow-400 {
    color: #f59e0b !important;
    filter: drop-shadow(0 5px 10px rgba(245, 158, 11, 0.16));
}

body.vortex-bg-active .star-muted,
body.vortex-bg-active .text-gray-300 {
    color: #cbd5e1 !important;
}

body.vortex-bg-active .product-actions,
body.vortex-bg-active article[data-recommendation-card] .mt-4.flex,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white .flex.space-x-2 {
    display: flex !important;
    gap: 0.68rem !important;
    margin-top: auto !important;
    padding-top: 0.95rem !important;
}

body.vortex-bg-active .card-primary-action,
body.vortex-bg-active .card-secondary-action,
body.vortex-bg-active article[data-recommendation-card] a.flex-1,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1 {
    display: inline-flex !important;
    min-height: 2.75rem;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0057a8, #0284c7 48%, #10b981) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(0, 87, 168, 0.22) !important;
    text-decoration: none !important;
    font-weight: 680 !important;
    transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease !important;
}

body.vortex-bg-active .card-secondary-action {
    background: linear-gradient(135deg, #ffffff, #eef7ff) !important;
    color: #0057a8 !important;
    border: 1px solid rgba(0, 87, 168, 0.14) !important;
    box-shadow: 0 12px 24px rgba(0, 87, 168, 0.08) !important;
}

body.vortex-bg-active .card-primary-action:hover,
body.vortex-bg-active .card-secondary-action:hover,
body.vortex-bg-active article[data-recommendation-card] a.flex-1:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1:hover,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1:hover,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1:hover {
    filter: saturate(1.08);
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(0, 87, 168, 0.27) !important;
}

body.vortex-bg-active .card-icon-action,
body.vortex-bg-active .add-to-cart-btn,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button),
body.vortex-bg-active button[onclick*="addToCart"] {
    display: inline-flex !important;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(3, 169, 244, 0.18) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #0057a8 !important;
    box-shadow: 0 12px 26px rgba(0, 87, 168, 0.10) !important;
    transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease !important;
}

body.vortex-bg-active .card-icon-action:hover,
body.vortex-bg-active .add-to-cart-btn:hover,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button):hover,
body.vortex-bg-active button[onclick*="addToCart"]:hover {
    background: linear-gradient(135deg, #0057a8, #0284c7) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 38px rgba(0, 87, 168, 0.22) !important;
}

body.vortex-bg-active .product-save-button,
body.vortex-bg-active article[data-recommendation-card] [data-wishlist-button] {
    display: inline-flex !important;
    width: 2.55rem;
    height: 2.55rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 63, 94, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #e11d48 !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(12px) saturate(1.1);
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease !important;
}

body.vortex-bg-active .product-save-button:hover,
body.vortex-bg-active article[data-recommendation-card] [data-wishlist-button]:hover {
    background: #fff1f2 !important;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 18px 38px rgba(244, 63, 94, 0.16) !important;
}

body.vortex-bg-active .product-card:focus-visible,
body.vortex-bg-active .product-card-premium:focus-visible,
body.vortex-bg-active article[data-recommendation-card]:focus-visible,
body.vortex-bg-active .card-primary-action:focus-visible,
body.vortex-bg-active .card-secondary-action:focus-visible,
body.vortex-bg-active .card-icon-action:focus-visible,
body.vortex-bg-active .product-save-button:focus-visible {
    outline: 3px solid rgba(3, 169, 244, 0.36) !important;
    outline-offset: 4px !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .product-grid,
    body.vortex-bg-active .premium-product-grid,
    body.vortex-bg-active .product-grid-marketplace {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    body.vortex-bg-active .product-card,
    body.vortex-bg-active .product-card-premium,
    body.vortex-bg-active article[data-recommendation-card] {
        border-radius: 1.28rem !important;
    }

    body.vortex-bg-active .product-image-link,
    body.vortex-bg-active .product-card > a:first-child,
    body.vortex-bg-active .product-card-premium > a:first-child,
    body.vortex-bg-active article[data-recommendation-card] > a:first-of-type {
        min-height: 10.6rem !important;
    }

    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img {
        height: 10.6rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .product-card,
    body.vortex-bg-active .product-card-premium,
    body.vortex-bg-active article[data-recommendation-card],
    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img,
    body.vortex-bg-active .card-primary-action,
    body.vortex-bg-active .card-secondary-action,
    body.vortex-bg-active .card-icon-action,
    body.vortex-bg-active .product-save-button {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}


/* COMPACT MARKETPLACE CARD MODE — Amazon-like density while keeping VORTEX polish. */
:root {
    --vortex-card-radius: 1.05rem;
    --vortex-card-shadow: 0 10px 28px rgba(8, 47, 73, 0.075);
    --vortex-card-shadow-hover: 0 18px 44px rgba(0, 87, 168, 0.14), 0 6px 16px rgba(16, 185, 129, 0.07);
}

body.vortex-bg-active .product-grid,
body.vortex-bg-active .premium-product-grid,
body.vortex-bg-active .product-grid-marketplace {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.25rem), 1fr)) !important;
    gap: clamp(0.78rem, 1.45vw, 1.15rem) !important;
}

body.vortex-bg-active .product-card,
body.vortex-bg-active .product-card-premium,
body.vortex-bg-active article[data-recommendation-card],
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white {
    border-radius: var(--vortex-card-radius) !important;
    box-shadow: var(--vortex-card-shadow) !important;
}

body.vortex-bg-active .product-card:hover,
body.vortex-bg-active .product-card-premium:hover,
body.vortex-bg-active article[data-recommendation-card]:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover {
    transform: translate3d(0, -4px, 0) !important;
    box-shadow: var(--vortex-card-shadow-hover) !important;
}

body.vortex-bg-active .product-image-link,
body.vortex-bg-active .product-card > a:first-child,
body.vortex-bg-active .product-card-premium > a:first-child,
body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > a:first-child,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > div:first-child,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > div:first-child {
    min-height: 8.9rem !important;
}

body.vortex-bg-active .product-image,
body.vortex-bg-active .product-card img,
body.vortex-bg-active .product-card-premium img,
body.vortex-bg-active article[data-recommendation-card] img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white img {
    height: 8.9rem !important;
}

body.vortex-bg-active .product-placeholder,
body.vortex-bg-active article[data-recommendation-card] a > div,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a > div {
    min-height: 8.9rem !important;
}

body.vortex-bg-active .product-placeholder i,
body.vortex-bg-active article[data-recommendation-card] a > div i {
    font-size: 1.9rem !important;
}

body.vortex-bg-active .product-body,
body.vortex-bg-active .product-card .p-4,
body.vortex-bg-active .product-card .p-5,
body.vortex-bg-active .product-card-premium .p-4,
body.vortex-bg-active .product-card-premium .p-5,
body.vortex-bg-active article[data-recommendation-card] > div:last-child,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-4,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-5,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > .p-4,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > .p-4 {
    padding: 0.72rem !important;
}

body.vortex-bg-active .product-card-topline,
body.vortex-bg-active .product-meta,
body.vortex-bg-active .product-rating,
body.vortex-bg-active .product-trust-row {
    margin-top: 0.42rem !important;
}

body.vortex-bg-active .product-title,
body.vortex-bg-active .product-card h3,
body.vortex-bg-active .product-card-premium h3,
body.vortex-bg-active article[data-recommendation-card] h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white h3 {
    font-size: 0.94rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.026em !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.vortex-bg-active .product-description,
body.vortex-bg-active .product-meta,
body.vortex-bg-active article[data-recommendation-card] p,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white p {
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
}

body.vortex-bg-active .product-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.vortex-bg-active .product-price,
body.vortex-bg-active article[data-recommendation-card] .text-teal-950,
body.vortex-bg-active article[data-recommendation-card] .text-sm.font-black.text-teal-950 {
    padding: 0.28rem 0.48rem !important;
    font-size: 0.82rem !important;
}

body.vortex-bg-active .product-type-badge,
body.vortex-bg-active article[data-recommendation-card] .rounded-full,
body.vortex-bg-active .product-subtype,
body.vortex-bg-active .reason-chip,
body.vortex-bg-active .product-meta span,
body.vortex-bg-active .product-trust-row span {
    padding: 0.24rem 0.44rem !important;
    font-size: 0.68rem !important;
}

body.vortex-bg-active .product-actions,
body.vortex-bg-active article[data-recommendation-card] .mt-4.flex,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white .flex.space-x-2 {
    gap: 0.46rem !important;
    padding-top: 0.62rem !important;
}

body.vortex-bg-active .card-primary-action,
body.vortex-bg-active .card-secondary-action,
body.vortex-bg-active article[data-recommendation-card] a.flex-1,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1 {
    min-height: 2.2rem !important;
    padding: 0.5rem 0.62rem !important;
    font-size: 0.78rem !important;
}

body.vortex-bg-active .card-icon-action,
body.vortex-bg-active .add-to-cart-btn,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button),
body.vortex-bg-active button[onclick*="addToCart"] {
    min-width: 2.2rem !important;
    min-height: 2.2rem !important;
    padding: 0.48rem !important;
}

body.vortex-bg-active .product-save-button,
body.vortex-bg-active article[data-recommendation-card] [data-wishlist-button] {
    width: 2.15rem !important;
    height: 2.15rem !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .product-grid,
    body.vortex-bg-active .premium-product-grid,
    body.vortex-bg-active .product-grid-marketplace {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.72rem !important;
    }

    body.vortex-bg-active .product-image-link,
    body.vortex-bg-active .product-card > a:first-child,
    body.vortex-bg-active .product-card-premium > a:first-child,
    body.vortex-bg-active article[data-recommendation-card] > a:first-of-type {
        min-height: 7.4rem !important;
    }

    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img {
        height: 7.4rem !important;
    }

    body.vortex-bg-active .product-body,
    body.vortex-bg-active .product-card .p-4,
    body.vortex-bg-active .product-card .p-5,
    body.vortex-bg-active .product-card-premium .p-4,
    body.vortex-bg-active .product-card-premium .p-5,
    body.vortex-bg-active article[data-recommendation-card] > div:last-child {
        padding: 0.62rem !important;
    }
}


/* COMPACT MARKETPLACE CARD MODE v2 — true Amazon-like scan density. */
body.vortex-bg-active .product-grid,
body.vortex-bg-active .premium-product-grid,
body.vortex-bg-active .product-grid-marketplace {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.75rem), 1fr)) !important;
    gap: clamp(0.68rem, 1.2vw, 0.95rem) !important;
}

body.vortex-bg-active .product-image-link,
body.vortex-bg-active .product-card > a:first-child,
body.vortex-bg-active .product-card-premium > a:first-child,
body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > a:first-child,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > div:first-child,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > div:first-child {
    height: 7.8rem !important;
    min-height: 7.8rem !important;
    max-height: 7.8rem !important;
}

body.vortex-bg-active .product-image,
body.vortex-bg-active .product-card img,
body.vortex-bg-active .product-card-premium img,
body.vortex-bg-active article[data-recommendation-card] img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white img {
    height: 7.8rem !important;
    max-height: 7.8rem !important;
}

body.vortex-bg-active .product-placeholder,
body.vortex-bg-active article[data-recommendation-card] a > div,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a > div {
    min-height: 7.8rem !important;
    height: 7.8rem !important;
}

body.vortex-bg-active .product-body,
body.vortex-bg-active .product-card .p-4,
body.vortex-bg-active .product-card .p-5,
body.vortex-bg-active .product-card-premium .p-4,
body.vortex-bg-active .product-card-premium .p-5,
body.vortex-bg-active article[data-recommendation-card] > div:last-child,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-4,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-5,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > .p-4,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > .p-4 {
    padding: 0.58rem !important;
}

body.vortex-bg-active .product-description,
body.vortex-bg-active article[data-recommendation-card] p:not(:first-child) {
    display: none !important;
}

body.vortex-bg-active .product-card-topline {
    gap: 0.35rem !important;
}

body.vortex-bg-active .product-title,
body.vortex-bg-active .product-card h3,
body.vortex-bg-active .product-card-premium h3,
body.vortex-bg-active article[data-recommendation-card] h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white h3 {
    margin: 0.36rem 0 0.28rem !important;
    font-size: 0.88rem !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 2;
}

body.vortex-bg-active .product-meta {
    gap: 0.28rem !important;
    margin-top: 0.28rem !important;
}

body.vortex-bg-active .product-meta span,
body.vortex-bg-active .product-trust-row span,
body.vortex-bg-active article[data-recommendation-card] .text-cyan-800,
body.vortex-bg-active article[data-recommendation-card] .text-slate-500:last-child {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
}

body.vortex-bg-active .product-meta span:nth-child(n+2) {
    display: none !important;
}

body.vortex-bg-active .product-trust-row {
    display: none !important;
}

body.vortex-bg-active .product-rating {
    margin-top: 0.34rem !important;
    justify-content: flex-start !important;
    gap: 0.38rem !important;
}

body.vortex-bg-active .product-rating span:not(.stars) {
    font-size: 0.76rem !important;
}

body.vortex-bg-active .stars {
    font-size: 0.72rem !important;
}

body.vortex-bg-active .product-price,
body.vortex-bg-active article[data-recommendation-card] .text-teal-950,
body.vortex-bg-active article[data-recommendation-card] .text-sm.font-black.text-teal-950 {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #b12704 !important;
    font-size: 0.94rem !important;
    font-weight: 650 !important;
}

body.vortex-bg-active .product-type-badge,
body.vortex-bg-active article[data-recommendation-card] .rounded-full,
body.vortex-bg-active .product-subtype,
body.vortex-bg-active .reason-chip {
    padding: 0.2rem 0.38rem !important;
    font-size: 0.62rem !important;
}

body.vortex-bg-active .product-actions,
body.vortex-bg-active article[data-recommendation-card] .mt-4.flex,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white .flex.space-x-2 {
    gap: 0.38rem !important;
    padding-top: 0.48rem !important;
}

body.vortex-bg-active .card-primary-action,
body.vortex-bg-active .card-secondary-action,
body.vortex-bg-active article[data-recommendation-card] a.flex-1,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1 {
    min-height: 2rem !important;
    padding: 0.42rem 0.52rem !important;
    font-size: 0.72rem !important;
}

body.vortex-bg-active .card-icon-action,
body.vortex-bg-active .add-to-cart-btn,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button),
body.vortex-bg-active button[onclick*="addToCart"] {
    min-width: 2rem !important;
    min-height: 2rem !important;
    padding: 0.38rem !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .product-grid,
    body.vortex-bg-active .premium-product-grid,
    body.vortex-bg-active .product-grid-marketplace {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.58rem !important;
    }

    body.vortex-bg-active .product-image-link,
    body.vortex-bg-active .product-card > a:first-child,
    body.vortex-bg-active .product-card-premium > a:first-child,
    body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img {
        height: 6.8rem !important;
        min-height: 6.8rem !important;
        max-height: 6.8rem !important;
    }
}


/* HERO CATEGORY ART — replaces logo-like icons with premium CSS mini-illustrations. */
body.vortex-bg-active .mobile-menu-label {
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.vortex-bg-active .mobile-menu-orb {
    position: relative;
    display: inline-flex;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #00d4ff, #10b981);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12), 0 8px 18px rgba(0, 87, 168, 0.2);
}

body.vortex-bg-active .hero-market-art {
    position: relative;
    width: 2.95rem !important;
    height: 2.95rem !important;
    flex: 0 0 2.95rem !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 1.15rem !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.98), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 248, 255, 0.92)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 18px 34px rgba(0, 42, 92, 0.14) !important;
    isolation: isolate;
}

body.vortex-bg-active .hero-market-art::before,
body.vortex-bg-active .hero-market-art::after {
    content: "";
    position: absolute;
    z-index: 1;
}

body.vortex-bg-active .hero-market-art-service {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #ecfdf5, #f8feff 55%, #d1fae5) !important;
}

body.vortex-bg-active .hero-market-art-service::before {
    inset: 0.72rem;
    background:
        radial-gradient(circle at 18% 52%, #047857 0 0.22rem, transparent 0.24rem),
        radial-gradient(circle at 50% 22%, #00a6fb 0 0.25rem, transparent 0.27rem),
        radial-gradient(circle at 78% 60%, #10b981 0 0.22rem, transparent 0.24rem),
        linear-gradient(35deg, transparent 45%, rgba(4, 120, 87, 0.55) 46% 52%, transparent 53%),
        linear-gradient(145deg, transparent 44%, rgba(0, 166, 251, 0.5) 45% 51%, transparent 52%);
    filter: drop-shadow(0 8px 12px rgba(4, 120, 87, 0.18));
}

body.vortex-bg-active .hero-market-art-service::after {
    right: 0.46rem;
    bottom: 0.48rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(16, 185, 129, 0.52);
    border-left-color: transparent;
}

body.vortex-bg-active .hero-market-art-book {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #eff6ff, #ffffff 55%, #dbeafe) !important;
}

body.vortex-bg-active .hero-market-art-book::before {
    left: 0.72rem;
    top: 0.62rem;
    width: 1.44rem;
    height: 1.78rem;
    border-radius: 0.32rem 0.18rem 0.18rem 0.32rem;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.9) 0 0.18rem, transparent 0.2rem),
        linear-gradient(135deg, #0284c7, #38bdf8);
    box-shadow:
        0.28rem 0.16rem 0 -0.03rem rgba(255, 255, 255, 0.85),
        0.38rem 0.22rem 0 -0.01rem rgba(14, 165, 233, 0.35),
        0 12px 18px rgba(2, 132, 199, 0.2);
    transform: rotate(-7deg);
}

body.vortex-bg-active .hero-market-art-book::after {
    left: 1.12rem;
    top: 0.95rem;
    width: 0.96rem;
    height: 0.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.34rem 0 rgba(255,255,255,0.64), 0 0.68rem 0 rgba(255,255,255,0.42);
    transform: rotate(-7deg);
}

body.vortex-bg-active .hero-market-art-webinar {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #f5f3ff, #ffffff 55%, #ede9fe) !important;
}

body.vortex-bg-active .hero-market-art-webinar::before {
    inset: 0.66rem;
    border-radius: 0.9rem;
    background:
        radial-gradient(circle at 72% 22%, rgba(255,255,255,0.82) 0 0.16rem, transparent 0.18rem),
        linear-gradient(135deg, #7c3aed, #06b6d4);
    box-shadow: 0 14px 22px rgba(124, 58, 237, 0.22);
}

body.vortex-bg-active .hero-market-art-webinar::after {
    left: 1.35rem;
    top: 1.14rem;
    width: 0.58rem;
    height: 0.7rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: rgba(255, 255, 255, 0.94);
    filter: drop-shadow(0 5px 8px rgba(49, 46, 129, 0.18));
}

body.vortex-bg-active .hero-market-art-course {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #fff7ed, #ffffff 55%, #ffedd5) !important;
}

body.vortex-bg-active .hero-market-art-course::before {
    left: 0.78rem;
    top: 0.64rem;
    width: 1.42rem;
    height: 1.42rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, #fff 0 0.33rem, transparent 0.35rem),
        conic-gradient(from 20deg, #f59e0b, #14b8a6, #0ea5e9, #f59e0b);
    box-shadow: 0 14px 20px rgba(245, 158, 11, 0.2);
}

body.vortex-bg-active .hero-market-art-course::after {
    left: 1.06rem;
    bottom: 0.52rem;
    width: 0.86rem;
    height: 0.72rem;
    background: linear-gradient(135deg, #f59e0b, #fb7185);
    clip-path: polygon(0 0, 50% 38%, 100% 0, 82% 100%, 50% 76%, 18% 100%);
    filter: drop-shadow(0 9px 12px rgba(251, 113, 133, 0.2));
}

body.vortex-bg-active .tm-preview-orbit {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0 0.28rem, transparent 0.3rem),
        conic-gradient(from 120deg, rgba(0, 212, 255, 0.95), rgba(16, 185, 129, 0.88), rgba(125, 92, 255, 0.86), rgba(0, 212, 255, 0.95)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 16px 34px rgba(0, 212, 255, 0.25) !important;
}

body.vortex-bg-active .tm-preview-orbit::before,
body.vortex-bg-active .tm-preview-orbit::after {
    content: "";
    position: absolute;
    inset: 0.72rem 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 999px;
    transform: rotate(-24deg);
}

body.vortex-bg-active .tm-preview-orbit::after {
    inset: 0.5rem 0.72rem;
    transform: rotate(58deg);
    opacity: 0.78;
}

/* SIDEBAR ROOT CAUSE FIX — legacy CSS made the fixed sidebar relative, creating a gap. */
@media (min-width: 768px) {
    body.vortex-bg-active .premium-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 30 !important;
        width: 18rem !important;
        max-width: 18rem !important;
        height: 100dvh !important;
        transform: translateX(0) !important;
        translate: none !important;
    }

    body.vortex-bg-active .dashboard-layout {
        display: flex !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        padding-left: 0 !important;
        overflow: visible !important;
    }

    body.vortex-bg-active .dashboard-layout > .dashboard-main,
    body.vortex-bg-active .md\:ml-54,
    body.vortex-bg-active .md\:ml-64,
    body.vortex-bg-active .lg\:ml-64,
    body.vortex-bg-active .md\:ml-44,
    body.vortex-bg-active .md\:ml-\[11\.25rem\],
    body.vortex-bg-active .content-area {
        width: calc(100vw - 18rem) !important;
        max-width: calc(100vw - 18rem) !important;
        min-width: 0 !important;
        margin-left: 18rem !important;
        overflow: visible !important;
    }
}

body.vortex-bg-active .dashboard-main main {
    overflow: visible !important;
}

/* VORTEX DASHBOARD NAVBAR — clean rebuild. */
.vx-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    padding: 1rem 1rem 0;
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.92), rgba(248, 252, 255, 0));
    backdrop-filter: blur(10px);
}

.vx-nav__shell {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.vx-nav__row {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(18rem, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 4.65rem;
    padding: 0.72rem;
}

.vx-nav__brand,
.vx-nav__profile,
.vx-nav__icon-button,
.vx-nav__search-button {
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.vx-nav__brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.76rem;
    border-radius: 16px;
    padding: 0.42rem 0.55rem;
    color: #0f172a;
}

.vx-nav__brand:hover {
    background: #f8fbff;
}

.vx-nav__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.62rem;
    height: 2.62rem;
    flex: 0 0 2.62rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #082f49, #0369a1 50%, #14b8a6);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    box-shadow: 0 12px 24px rgba(3, 105, 161, 0.18);
}

.vx-nav__brand-copy,
.vx-nav__profile-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vx-nav__eyebrow {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.vx-nav__title {
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 820;
    letter-spacing: -0.035em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-nav__search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.72rem;
    width: min(100%, 46rem);
    justify-self: center;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    background: #f8fbff;
    padding: 0.42rem 0.44rem 0.42rem 0.86rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.vx-nav__search:focus-within {
    border-color: rgba(3, 105, 161, 0.34);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.vx-nav__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    color: #0284c7;
}

.vx-nav__search-icon svg,
.vx-nav__icon-button svg,
.vx-nav__empty-note svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 2;
}

.vx-nav__search-input {
    width: 100%;
    min-width: 0;
    height: 2.45rem;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.vx-nav__search-input:focus,
.vx-nav__search-input:focus-visible,
.vx-nav__search-input:hover {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vx-nav__search-input::-webkit-search-decoration,
.vx-nav__search-input::-webkit-search-cancel-button,
.vx-nav__search-input::-webkit-search-results-button,
.vx-nav__search-input::-webkit-search-results-decoration {
    display: none;
}

.vx-nav__search-input::placeholder {
    color: #94a3b8;
    font-weight: 560;
}

.vx-nav__search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.45rem;
    min-width: 5.2rem;
    border: 0;
    border-radius: 14px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 780;
    line-height: 1;
    padding: 0 1rem;
    white-space: nowrap;
    cursor: pointer;
}

.vx-nav__search-button:hover {
    transform: translateY(-1px);
    background: #083344;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.vx-nav__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
}

.vx-nav__icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 16px;
    background: #ffffff;
    color: #334155;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.vx-nav__icon-button:hover,
.vx-nav__profile:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, 0.32);
    color: #0369a1;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}

.vx-nav__badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.18rem;
    height: 1.18rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
}

.vx-nav__profile {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    max-width: 14rem;
    height: 2.85rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    padding: 0.25rem 0.72rem 0.25rem 0.25rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.vx-nav__avatar {
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 2.3rem;
    border: 2px solid #ffffff;
    border-radius: 14px;
    object-fit: cover;
    background: #e2e8f0;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.16);
}

.vx-nav__profile-name {
    max-width: 9rem;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-nav__profile-role {
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1.15;
}

.vx-nav__notification-wrap {
    position: relative;
}

.vx-nav__dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: min(22rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(18px);
}

.vx-nav__dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fbff;
    padding: 1rem;
}

.vx-nav__dropdown-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 820;
    letter-spacing: -0.03em;
}

.vx-nav__dropdown-head button {
    border: 0;
    background: transparent;
    color: #0284c7;
    font-size: 0.74rem;
    font-weight: 780;
    cursor: pointer;
}

.vx-nav__dropdown-list {
    max-height: 24rem;
    overflow-y: auto;
}

.vx-nav__empty-note {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #94a3b8;
    text-align: center;
}

.vx-nav__empty-note svg {
    width: 2rem;
    height: 2rem;
}

.vx-nav__empty-note p {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 620;
}

.vx-nav__brand:focus-visible,
.vx-nav__search-input:focus-visible,
.vx-nav__search-button:focus-visible,
.vx-nav__icon-button:focus-visible,
.vx-nav__profile:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.28);
    outline-offset: 3px;
}

@media (max-width: 1120px) {
    .vx-nav__row {
        grid-template-columns: minmax(8rem, 11rem) minmax(14rem, 1fr) auto;
        gap: 0.72rem;
    }

    .vx-nav__brand-copy {
        display: none;
    }

    .vx-nav__brand {
        width: fit-content;
    }

    .vx-nav__profile-copy {
        display: none;
    }

    .vx-nav__profile {
        width: 2.85rem;
        padding: 0.25rem;
    }
}

@media (max-width: 767px) {
    .vx-nav {
        padding: 4.35rem 0.75rem 0;
    }

    .vx-nav__shell {
        border-radius: 20px;
    }

    .vx-nav__row {
        grid-template-columns: auto 1fr;
        gap: 0.68rem;
        min-height: auto;
        padding: 0.65rem;
    }

    .vx-nav__brand-copy {
        display: flex;
    }

    .vx-nav__brand {
        padding: 0.25rem;
    }

    .vx-nav__mark {
        width: 2.45rem;
        height: 2.45rem;
        flex-basis: 2.45rem;
        border-radius: 14px;
    }

    .vx-nav__eyebrow {
        display: none;
    }

    .vx-nav__title {
        max-width: 8rem;
        font-size: 0.92rem;
    }

    .vx-nav__actions {
        justify-self: end;
        gap: 0.45rem;
    }

    .vx-nav__search {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        border-radius: 16px;
        padding-left: 0.75rem;
    }

    .vx-nav__search-input {
        height: 2.35rem;
        font-size: 0.86rem;
    }

    .vx-nav__search-button {
        height: 2.35rem;
        min-width: auto;
        padding: 0 0.82rem;
        border-radius: 13px;
        font-size: 0.76rem;
    }

    .vx-nav__icon-button,
    .vx-nav__profile {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 14px;
    }

    .vx-nav__avatar {
        width: 2.05rem;
        height: 2.05rem;
        flex-basis: 2.05rem;
        border-radius: 12px;
    }
}

@media (max-width: 420px) {
    .vx-nav__brand-copy {
        display: none;
    }

    .vx-nav__search-button {
        min-width: 2.3rem;
        width: 2.3rem;
        padding: 0;
        font-size: 0;
    }

    .vx-nav__search-button::before {
        content: "→";
        font-size: 1rem;
    }
}


/* VORTEX SEARCHBAR — rebuilt from scratch. */
.vx-searchbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-self: center;
    width: min(100%, 44rem);
    min-width: 0;
    height: 3.18rem;
    gap: 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 0.28rem 0.32rem 0.28rem 0.92rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.vx-searchbar:focus-within {
    border-color: rgba(2, 132, 199, 0.42);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.11), 0 16px 34px rgba(15, 23, 42, 0.08);
}

.vx-searchbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    color: #0284c7;
}

.vx-searchbar__icon svg,
.vx-searchbar__button svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.2;
}

.vx-searchbar__input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 2.45rem;
    margin: 0;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 620;
    letter-spacing: -0.015em;
    line-height: 1;
}

.vx-searchbar__input:focus,
.vx-searchbar__input:focus-visible,
.vx-searchbar__input:hover {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vx-searchbar__input::placeholder {
    color: #94a3b8;
    opacity: 1;
    font-weight: 560;
}

.vx-searchbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.55rem;
    min-width: 6.25rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #083344);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 780;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 0 1rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.vx-searchbar__button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.vx-searchbar__button:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.28);
    outline-offset: 3px;
}

@media (max-width: 1120px) {
    .vx-searchbar {
        width: min(100%, 34rem);
    }
}

@media (max-width: 767px) {
    .vx-searchbar {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        height: 3rem;
        gap: 0.52rem;
        padding: 0.26rem 0.28rem 0.26rem 0.8rem;
    }

    .vx-searchbar__input {
        height: 2.28rem;
        font-size: 0.86rem;
    }

    .vx-searchbar__button {
        height: 2.35rem;
        min-width: 5.2rem;
        padding: 0 0.82rem;
        font-size: 0.76rem;
    }
}

@media (max-width: 420px) {
    .vx-searchbar__button {
        width: 2.35rem;
        min-width: 2.35rem;
        padding: 0;
    }

    .vx-searchbar__button span {
        display: none;
    }
}

/* VORTEX SEARCHBAR FINAL OVERRIDE — beat global form/button rules. */
body.vortex-bg-active .vx-searchbar {
    width: min(100%, 42rem) !important;
    height: 3rem !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
    padding: 0.25rem 0.28rem 0.25rem 0.88rem !important;
}

body.vortex-bg-active .vx-searchbar:focus-within {
    border-color: rgba(0, 87, 168, 0.34) !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.08), 0 12px 26px rgba(15, 23, 42, 0.075) !important;
}

body.vortex-bg-active .vx-searchbar .vx-searchbar__input,
body.vortex-bg-active .vx-searchbar input.vx-searchbar__input[type="text"] {
    min-height: 0 !important;
    height: 2.35rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-size: 0.9rem !important;
    font-weight: 560 !important;
}

body.vortex-bg-active .vx-searchbar .vx-searchbar__input:focus,
body.vortex-bg-active .vx-searchbar .vx-searchbar__input:hover,
body.vortex-bg-active .vx-searchbar .vx-searchbar__input:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"] {
    min-height: 0 !important;
    height: 2.32rem !important;
    min-width: 5.4rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #0057a8 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    padding: 0 0.9rem !important;
    font-size: 0.78rem !important;
    font-weight: 720 !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"]:hover {
    background: #064f8f !important;
    transform: none !important;
    box-shadow: none !important;
}

/* VORTEX TOPBAR SEARCH-FIRST REFINEMENT. */
body.vortex-bg-active .vx-nav__shell {
    border-radius: 1.35rem !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
}

body.vortex-bg-active .vx-nav__row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 4.35rem !important;
    gap: 0.85rem !important;
    padding: 0.68rem 0.75rem !important;
}

body.vortex-bg-active .vx-searchbar {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 3.05rem !important;
    gap: 0.72rem !important;
    border-color: rgba(0, 87, 168, 0.13) !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

body.vortex-bg-active .vx-searchbar__icon {
    width: 1.55rem !important;
    height: 1.55rem !important;
    border-radius: 999px !important;
    background: rgba(0, 87, 168, 0.07) !important;
    color: #0057a8 !important;
}

body.vortex-bg-active .vx-searchbar__input,
body.vortex-bg-active .vx-searchbar input.vx-searchbar__input[type="text"] {
    font-size: 0.94rem !important;
    font-weight: 520 !important;
    letter-spacing: -0.01em !important;
}

body.vortex-bg-active .vx-searchbar__input::placeholder {
    color: #7b8da2 !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"] {
    min-width: 6.2rem !important;
    background: linear-gradient(135deg, #0057a8, #006ecb) !important;
    box-shadow: 0 8px 16px rgba(0, 87, 168, 0.16) !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"]:hover {
    background: linear-gradient(135deg, #004d96, #005fb3) !important;
    box-shadow: 0 10px 20px rgba(0, 87, 168, 0.2) !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .vx-nav__row {
        grid-template-columns: 1fr auto !important;
        gap: 0.55rem !important;
        padding: 0.6rem !important;
    }

    body.vortex-bg-active .vx-searchbar {
        grid-column: 1 / -1 !important;
        order: 2 !important;
    }
}

/* TRUE EOF: cart/privacy/chatbot final winning layer. */
.product-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)) !important;
    gap: 1rem !important;
}

.product-grid-compact .product-image-link,
.product-grid-compact .product-image,
.product-grid-compact .product-placeholder {
    height: 8.75rem !important;
    min-height: 8.75rem !important;
}

.product-grid-compact .product-body {
    padding: .9rem !important;
}

.product-grid-compact .product-description {
    display: none !important;
}

body.privacy-policy-page .privacy-page-shell {
    min-height: 100dvh !important;
    padding: clamp(.8rem, 1.6vw, 1.25rem) !important;
}

body.privacy-policy-page .privacy-nav {
    position: sticky !important;
    top: .8rem !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    border: 1px solid rgba(0, 87, 168, .10) !important;
    border-radius: 1.5rem !important;
    background: rgba(255, 255, 255, .86) !important;
    padding: .8rem !important;
    box-shadow: 0 18px 42px rgba(0, 87, 168, .09) !important;
    backdrop-filter: blur(18px) !important;
}

body.privacy-policy-page .privacy-main {
    width: min(100%, 76rem) !important;
    margin: 0 auto !important;
    padding: clamp(2rem, 5vw, 4.5rem) 0 3rem !important;
}

body.privacy-policy-page .privacy-hero {
    border: 1px solid rgba(0, 87, 168, .10) !important;
    border-radius: clamp(1.75rem, 4vw, 3rem) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 132, 255, .18), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(16, 185, 129, .13), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,250,255,.94)) !important;
    padding: clamp(1.5rem, 5vw, 4rem) !important;
    box-shadow: 0 28px 70px rgba(0, 87, 168, .10) !important;
}

body.privacy-policy-page .privacy-hero h1 {
    max-width: 13ch !important;
    color: #07182d !important;
    font-size: clamp(2.35rem, 7vw, 5.2rem) !important;
    font-weight: 680 !important;
    letter-spacing: -.07em !important;
    line-height: .94 !important;
}

button#chatbotToggle.chatbot-toggle {
    position: fixed !important;
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
    z-index: 9998 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 4rem !important;
    height: 4rem !important;
    min-width: 4rem !important;
    min-height: 4rem !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: 1.45rem !important;
    background: linear-gradient(135deg, #0057a8, #0084ff) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: 0 20px 42px rgba(0, 87, 168, .28), inset 0 1px 0 rgba(255,255,255,.28) !important;
    pointer-events: auto !important;
}

button#chatbotToggle.chatbot-toggle:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

div#chatbotWidget.chatbot-widget {
    position: fixed !important;
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 5.1rem) !important;
    left: auto !important;
    top: auto !important;
    z-index: 9997 !important;
    width: min(24rem, calc(100vw - 2rem)) !important;
    max-height: min(39rem, calc(100dvh - 7rem)) !important;
    overflow: hidden !important;
}

div#chatbotWidget.chatbot-widget:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
}

@media (max-width: 767px) {
    body.privacy-policy-page .privacy-page-shell {
        margin-left: 0 !important;
        padding-top: 4.75rem !important;
    }

    button#chatbotToggle.chatbot-toggle {
        right: .9rem !important;
        bottom: .9rem !important;
        width: 3.55rem !important;
        height: 3.55rem !important;
        min-width: 3.55rem !important;
        min-height: 3.55rem !important;
        border-radius: 1.2rem !important;
    }

    div#chatbotWidget.chatbot-widget {
        right: .65rem !important;
        bottom: 4.95rem !important;
        width: calc(100vw - 1.3rem) !important;
        max-height: calc(100dvh - 6rem) !important;
    }
}
/* ABSOLUTE EOF: Tayapro external cards must win over legacy card overrides. */
.tayapro-book-card .product-image-link {
    background:
        radial-gradient(circle at 24% 18%, rgba(20, 184, 166, .18), transparent 34%),
        linear-gradient(135deg, rgba(240,253,250,.95), rgba(255,255,255,.94)) !important;
}

.tayapro-book-card .product-type-badge {
    background: linear-gradient(135deg, rgba(15, 118, 110, .95), rgba(8, 145, 178, .94)) !important;
    color: #fff !important;
}

.tayapro-book-card .card-primary-action {
    background: linear-gradient(135deg, #0f766e, #0057a8) !important;
}
/* FINAL TAYAPRO CARD ICON OVERRIDES */
.tayapro-book-card .product-image-link::after {
    content: none !important;
    display: none !important;
}

.tayapro-book-cover-fallback > svg {
    width: 4rem !important;
    height: 4rem !important;
    color: #0f766e !important;
}

.tayapro-book-card .product-trust-row svg,
.tayapro-book-card .card-primary-action svg {
    flex: 0 0 auto !important;
}

.tayapro-book-card .product-trust-row svg {
    width: .95rem !important;
    height: .95rem !important;
}

.tayapro-book-card .card-primary-action svg {
    width: 1rem !important;
    height: 1rem !important;
}