/* Line 15875 (upskill-commerce-1-r1): the Google path for the commerce pages (the character shelf, the pricing
   overview, the legacy AI employees page). The same --ns-* token names and values as public/css/ns-tokens.css
   (Google's surface greys, #202124 ink, #5f6368 secondary, #dadce0 lines, NetShow gold as the accent), scoped to
   .ns-commerce so a page carries them without the split shell: light by default, dark under
   prefers-color-scheme: dark or a dark Bootstrap theme. Pages inside the split shell do not take this class: they
   read the shell's own --ns-* values (with their old colours as fallbacks). The ui-kit (--nsk-*) pages map onto
   the same tokens, so their cards, chips and buttons follow. */

.ns-commerce {
    --ns-bg: #ffffff;
    --ns-bg-deep: #f8f9fa;
    --ns-surface: #f1f3f4;
    --ns-elevated: #e8eaed;
    --ns-card: #ffffff;
    --ns-text: #202124;
    --ns-text-2: #5f6368;
    --ns-gold: #f5a623;
    --ns-gold-deep: #b06000;
    --ns-border: #dadce0;
    --ns-border-strong: #bdc1c6;
    --ns-on-accent: #202124;
    --ns-focus: #1a73e8;
    --ns-font: Roboto, 'Google Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ns-radius: 12px;
    color-scheme: light;
    color: var(--ns-text);
    background: var(--ns-bg);
    font-family: var(--ns-font);
    border-radius: var(--ns-radius);
}

@media (prefers-color-scheme: dark) {
    .ns-commerce {
        --ns-bg: #202124;
        --ns-bg-deep: #1b1c1f;
        --ns-surface: #292a2d;
        --ns-elevated: #35363a;
        --ns-card: #2d2e31;
        --ns-text: #e8eaed;
        --ns-text-2: #9aa0a6;
        --ns-gold-deep: #fdd663;
        --ns-border: rgba(232, 234, 237, .12);
        --ns-border-strong: rgba(232, 234, 237, .2);
        --ns-focus: #8ab4f8;
        color-scheme: dark;
    }
}

[data-bs-theme="dark"] .ns-commerce {
    --ns-bg: #202124;
    --ns-bg-deep: #1b1c1f;
    --ns-surface: #292a2d;
    --ns-elevated: #35363a;
    --ns-card: #2d2e31;
    --ns-text: #e8eaed;
    --ns-text-2: #9aa0a6;
    --ns-gold-deep: #fdd663;
    --ns-border: rgba(232, 234, 237, .12);
    --ns-border-strong: rgba(232, 234, 237, .2);
    --ns-focus: #8ab4f8;
    color-scheme: dark;
}

/* The ui-kit pages (the character shelf) read --nsk-*: point them at the tokens. */
.ns-commerce.nsk-chr,
.ns-commerce .nsk-chr {
    --nsk-bg: var(--ns-bg);
    --nsk-surface: var(--ns-surface);
    --nsk-surface-2: var(--ns-elevated);
    --nsk-ink: var(--ns-text);
    --nsk-sub: var(--ns-text-2);
    --nsk-faint: var(--ns-text-2);
    --nsk-line: var(--ns-border);
    --nsk-accent: var(--ns-gold);
    --nsk-accent-hover: var(--ns-gold-deep);
    --nsk-font-body: var(--ns-font);
    --nsk-font-display: var(--ns-font);
    --nsk-text: var(--ns-text);
    --nsk-band: var(--ns-surface);
    --nsk-header: var(--ns-surface);
    --nsk-inset: var(--ns-bg);
    --nsk-float: var(--ns-card);
    --nsk-chip-bg: var(--ns-elevated);
    --nsk-bd: var(--ns-border);
    --nsk-bd-soft: var(--ns-border);
    --nsk-bd-strong: var(--ns-border-strong);
    --nsk-on-accent: var(--ns-on-accent);
    --nsk-accent-subtle: rgba(245, 166, 35, .14);
    --nsk-focus: var(--ns-focus);
    --nsk-shadow-sm: 0 1px 2px rgba(60, 64, 67, .15);
    --nsk-shadow-md: 0 1px 3px rgba(60, 64, 67, .15), 0 4px 8px rgba(60, 64, 67, .1);
}

.ns-commerce .nsk-chip--free,
.ns-commerce .nsk-chip--pin {
    color: var(--ns-gold-deep);
}

.ns-commerce a:focus-visible,
.ns-commerce button:focus-visible,
.ns-commerce input:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

/* Line 15803 (upskill-doors-4-r1, ai.features.product_pages_2026): the product poster (marketing/products/_shell) and
   the public agent shelf (/marketplace/agents) read the same tokens. The poster's per-product accent stays
   --product-accent; the shelf's old #0d0d0d / #1a1a1a / amber-gradient literals become Google surfaces with one calm
   gold action. Card photos keep their dark scrim so names stay readable over any face. */
.ns-commerce.ns-poster {
    border-radius: 0;
}

.ns-poster .product-hero h1,
.ns-poster .pain-section h2,
.ns-poster .solution-section h2,
.ns-poster .pricing-section h2,
.ns-poster .faq-section h2,
.ns-poster .final-cta h2,
.ns-poster .pain-card h3,
.ns-poster .feature-card h3,
.ns-poster .pricing-card .tier-name,
.ns-poster .pricing-card .tier-price {
    color: var(--ns-text);
    font-family: var(--ns-font);
    letter-spacing: 0;
}

.ns-poster .product-hero h1 {
    font-weight: 500;
}

.ns-poster .pain-section,
.ns-poster .pricing-section {
    background: var(--ns-bg-deep);
    border-top: 1px solid var(--ns-border);
}

.ns-poster .proof-strip {
    background: var(--ns-surface);
    border-color: var(--ns-border);
}

.ns-poster .pain-card,
.ns-poster .feature-card,
.ns-poster .pricing-card {
    background: var(--ns-card);
    border: 1px solid var(--ns-border);
    box-shadow: 0 1px 2px rgba(60, 64, 67, .15);
}

.ns-poster .pricing-card.popular {
    border-color: var(--ns-gold);
}

.ns-poster .pain-card .pain-icon {
    color: var(--ns-text-2);
}

.ns-poster .final-cta p,
.ns-poster .faq-answer p {
    color: var(--ns-text-2);
}

.ns-poster .faq-item {
    border-bottom-color: var(--ns-border);
}

.ns-poster .btn-product-primary,
.ns-poster .pricing-card.popular .tier-cta {
    background: var(--ns-gold);
    color: var(--ns-on-accent);
    border-radius: 999px;
    font-weight: 500;
    min-height: 44px;
}

.ns-poster .btn-product-primary:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .3);
}

.ns-poster .btn-product-secondary,
.ns-poster .pricing-card:not(.popular) .tier-cta {
    border: 1px solid var(--ns-border-strong);
    color: var(--ns-text);
    border-radius: 999px;
    font-weight: 500;
    min-height: 44px;
}

.ns-commerce.marketplace-container {
    background-color: var(--ns-bg);
    border-radius: 0;
}

.ns-commerce.marketplace-container h1,
.ns-commerce .mp-scroll-title,
.ns-commerce .mp-empty-state h5 {
    color: var(--ns-text);
    font-family: var(--ns-font);
    font-weight: 500;
}

.ns-commerce.marketplace-container h1 + p,
.ns-commerce.marketplace-container .text-muted,
.ns-commerce.marketplace-container [data-shelf-total],
.ns-commerce .mp-card-desc {
    color: var(--ns-text-2) !important;
}

.ns-commerce .mp-tabs {
    border-bottom-color: var(--ns-border);
}

.ns-commerce .mp-tab,
.ns-commerce .mp-view-btn,
.ns-commerce .mp-scroll-arrow,
.ns-commerce .mp-btn-try,
.ns-commerce .mp-btn-owned {
    background: var(--ns-card);
    border: 1px solid var(--ns-border);
    color: var(--ns-text);
}

.ns-commerce .mp-tab:hover,
.ns-commerce .mp-view-btn:hover,
.ns-commerce .mp-scroll-arrow:hover,
.ns-commerce .mp-btn-try:hover {
    background: var(--ns-surface);
    border-color: var(--ns-border-strong);
    color: var(--ns-text);
}

.ns-commerce .mp-view-toggle {
    background-color: var(--ns-surface);
    border: 1px solid var(--ns-border);
}

.ns-commerce .mp-view-toggle .mp-view-btn:not(.active):not(:hover) {
    background: transparent;
    border-color: transparent;
}

.ns-commerce .page-item .page-link {
    background-color: var(--ns-card);
    border-color: var(--ns-border);
    color: var(--ns-text);
}

.ns-commerce .page-item .page-link:hover {
    background-color: var(--ns-surface);
    color: var(--ns-text);
}

.ns-commerce .page-item.active .page-link {
    background: var(--ns-gold);
    border-color: var(--ns-gold);
    color: var(--ns-on-accent);
}

.ns-commerce .page-item.disabled .page-link {
    background-color: var(--ns-bg);
    color: var(--ns-text-2);
}

.ns-commerce .mp-tab.active,
.ns-commerce .mp-view-btn.active {
    background: var(--ns-surface);
    border-color: var(--ns-gold);
    color: var(--ns-text);
    box-shadow: inset 0 -2px 0 var(--ns-gold);
}

.ns-commerce .mp-search-bar,
.ns-commerce .mp-category-select {
    background-color: var(--ns-card);
    border: 1px solid var(--ns-border);
    color: var(--ns-text);
    border-radius: 999px;
}

.ns-commerce .mp-search-bar input {
    color: var(--ns-text);
}

.ns-commerce .mp-search-bar i,
.ns-commerce .mp-search-bar input::placeholder {
    color: var(--ns-text-2);
}

.ns-commerce .mp-search-bar:focus-within,
.ns-commerce .mp-category-select:focus {
    border-color: var(--ns-focus);
    box-shadow: 0 0 0 1px var(--ns-focus);
}

.ns-commerce .mp-category-select option {
    background: var(--ns-card);
    color: var(--ns-text);
}

.ns-commerce .mp-card,
.ns-commerce .mp-empty-state,
.ns-commerce .mp-action-menu {
    background-color: var(--ns-card);
    border: 1px solid var(--ns-border);
    box-shadow: 0 1px 2px rgba(60, 64, 67, .15);
}

.ns-commerce .mp-card:hover {
    border-color: var(--ns-border-strong);
    box-shadow: 0 1px 3px rgba(60, 64, 67, .15), 0 4px 8px rgba(60, 64, 67, .1);
}

.ns-commerce .mp-card-tag {
    background-color: var(--ns-surface);
    color: var(--ns-text-2);
}

.ns-commerce .mp-action-menu a {
    color: var(--ns-text);
}

.ns-commerce .mp-action-menu a:hover {
    background-color: var(--ns-surface);
    color: var(--ns-text);
}

.ns-commerce .mp-card-category,
.ns-commerce .mp-card-price,
.ns-commerce .mp-btn-buy {
    background: var(--ns-gold);
    color: var(--ns-on-accent);
}

.ns-commerce .mp-btn-buy:hover {
    background: var(--ns-gold-deep);
    color: var(--ns-bg);
}

.ns-commerce .mp-card-price.mp-free {
    background: var(--ns-card);
    border: 1px solid var(--ns-border);
    color: var(--ns-text);
}

.ns-commerce.marketplace-container .alert-info,
.ns-commerce.marketplace-container .alert-warning {
    background-color: var(--ns-surface);
    color: var(--ns-text);
    border: 1px solid var(--ns-border);
}

@media (max-width: 767.98px) {
    .ns-commerce .mp-filter-toggle {
        background-color: var(--ns-card);
        border-color: var(--ns-border);
        color: var(--ns-text);
    }
}

/* Line 15876 (upskill-commerce-2, ai.features.commerce_pages_google_path): Buy Credits (/buy/credits). The page reads the
   older design-system names (--ns-bg-secondary, --ns-text-primary, --ns-accent ...); inside .ns-credits they point at the
   Google-path tokens above, so its card, amount boxes, input and one checkout action follow light and dark. Gold stays
   the action colour; gold TEXT uses the deep gold so it reads on white. */
.ns-commerce.ns-credits {
    --ns-bg-secondary: var(--ns-card);
    --ns-bg-surface: var(--ns-card);
    --ns-bg-tertiary: var(--ns-bg-deep);
    --ns-text-primary: var(--ns-text);
    --ns-text-secondary: var(--ns-text-2);
    --ns-text-muted: var(--ns-text-2);
    --ns-accent: var(--ns-gold);
    min-height: 0;
    padding: 24px 16px 48px;
    align-items: flex-start;
    background: transparent;
}

.ns-credits *,
.ns-credits *::before,
.ns-credits *::after {
    box-sizing: border-box;
}

.ns-credits .credits-card {
    box-shadow: 0 1px 2px rgba(60, 64, 67, .15), 0 1px 3px 1px rgba(60, 64, 67, .08);
    border-radius: var(--ns-radius);
}

.ns-credits .credits-header {
    text-align: left;
    border-bottom-color: var(--ns-border);
}

.ns-credits .credits-title {
    justify-content: flex-start;
    font-weight: 500;
    font-size: 1.375rem;
    letter-spacing: 0;
}

.ns-credits .credits-title i,
.ns-credits .balance-value {
    color: var(--ns-gold-deep);
}

.ns-credits .credit-box {
    min-height: 44px;
    background: var(--ns-card);
}

.ns-credits .credit-box:hover {
    background: var(--ns-surface);
}

.ns-credits .credit-box.selected {
    background: rgba(245, 166, 35, .14);
    border: 2px solid var(--ns-gold);
}

.ns-credits .credit-box.selected .credit-amount {
    color: var(--ns-text);
}

.ns-credits .credit-box.selected .credit-value {
    color: var(--ns-text-2);
}

.ns-credits .custom-input {
    min-height: 44px;
    background: var(--ns-card);
    border-color: var(--ns-border-strong);
}

.ns-credits .custom-input:focus {
    border-color: var(--ns-focus);
    background: var(--ns-card);
}

.ns-credits .btn-checkout {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--ns-gold);
    color: var(--ns-on-accent);
    font-weight: 500;
    box-shadow: none;
}

.ns-credits .btn-checkout:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .3);
}

@media (max-width: 420px) {
    .ns-credits .credit-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .ns-credits .credit-box {
        padding: 12px 4px;
    }
}