/*
 * MikeSullyTools exact credit palette
 * Source: assets/product-examples/darker-credit-paletteToolCoverage.svg
 *
 * The reference is flat color except for the approved Video action gradient.
 * No other category receives gradients, transparency, glow, or invented colors.
 * Document surfaces use the reference's neutral canvas/text tokens.
 */

:root {
  --mst-palette-canvas: #05070a;
  --mst-palette-heading: #d9dee7;
  --mst-palette-supporting: #7f8794;

  --mst-credit-surface: #05070a;
  --mst-credit-accent: #7f8794;
  --mst-credit-primary: #d9dee7;
  --mst-credit-secondary: #7f8794;
  --mst-credit-button-text: #05070a;
}

/* Exact wallet tokens from the supplied SVG. */
[data-credit-wallet="photo_pack"],
[data-wallet="photo_pack"] {
  --mst-credit-surface: #0b1614 !important;
  --mst-credit-accent: #285548 !important;
  --mst-credit-primary: #ced8d5 !important;
  --mst-credit-secondary: #708f85 !important;
  --mst-credit-button-text: #ced8d5 !important;
  --credit-tone: #285548 !important;
  --wallet-accent: #285548 !important;
}

[data-credit-wallet="ai_photo_pack"],
[data-wallet="ai_photo_pack"] {
  --mst-credit-surface: #0a1412 !important;
  --mst-credit-accent: #23493e !important;
  --mst-credit-primary: #ced8d5 !important;
  --mst-credit-secondary: #69877c !important;
  --mst-credit-button-text: #ced8d5 !important;
  --credit-tone: #23493e !important;
  --wallet-accent: #23493e !important;
}

[data-credit-wallet="video_pack"],
[data-wallet="video_pack"] {
  --mst-credit-surface: #0d1119 !important;
  --mst-credit-accent: #6087bf !important;
  --mst-credit-primary: #f5f8ff !important;
  --mst-credit-secondary: #8a97b4 !important;
  --mst-credit-button-text: #f5f8ff !important;
  --mst-video-accent: #254580 !important;
  --mst-video-accent-deep: #132a56 !important;
  --credit-tone: #254580 !important;
  --wallet-accent: #254580 !important;
}

[data-credit-wallet="ai_image_pack"],
[data-wallet="ai_image_pack"] {
  --mst-credit-surface: #120e17 !important;
  --mst-credit-accent: #483557 !important;
  --mst-credit-primary: #d3cdd8 !important;
  --mst-credit-secondary: #82728e !important;
  --mst-credit-button-text: #d3cdd8 !important;
  --credit-tone: #483557 !important;
  --wallet-accent: #483557 !important;
}

[data-credit-wallet="ai_image_pro_pack"],
[data-wallet="ai_image_pro_pack"] {
  --mst-credit-surface: #0d1119 !important;
  --mst-credit-accent: #35445c !important;
  --mst-credit-primary: #cfd4dc !important;
  --mst-credit-secondary: #758094 !important;
  --mst-credit-button-text: #cfd4dc !important;
  --credit-tone: #35445c !important;
  --wallet-accent: #35445c !important;
}

[data-credit-wallet="creator_pack"],
[data-wallet="creator_pack"] {
  --mst-credit-surface: #151209 !important;
  --mst-credit-accent: #574721 !important;
  --mst-credit-primary: #d8d4ca !important;
  --mst-credit-secondary: #8e8266 !important;
  --mst-credit-button-text: #d8d4ca !important;
  --credit-tone: #574721 !important;
  --wallet-accent: #574721 !important;
}

/* Document is absent from the SVG: use only its neutral global tokens. */
[data-credit-wallet="document_pack"],
[data-wallet="document_pack"] {
  --mst-credit-surface: #05070a !important;
  --mst-credit-accent: #7f8794 !important;
  --mst-credit-primary: #d9dee7 !important;
  --mst-credit-secondary: #7f8794 !important;
  --mst-credit-button-text: #05070a !important;
  --credit-tone: #7f8794 !important;
  --wallet-accent: #7f8794 !important;
}

/* Exact category-card treatment: flat tint, exact border, no glow. */
html body [data-credit-wallet].card,
html body [data-credit-wallet].account-credit-package-card,
html body [data-credit-wallet].account-credit-package-group-card,
html body [data-credit-wallet].mst-variable-credit-card,
html body [data-wallet].payment-wallet-card,
html body[data-credit-wallet] .credit-card,
html body[data-credit-wallet] .credit-offer-card,
html body[data-credit-wallet] .ai-credit-offer-card,
html body[data-credit-wallet] .purchase-card,
html body[data-credit-wallet] .credit-checkout-controls,
html body[data-credit-wallet] .credit-shell,
html body[data-credit-wallet] .credit-pill,
html body[data-credit-wallet] .photo-station-pricing-card,
html body[data-credit-wallet] .video-credit-offer-card,
html body[data-credit-wallet] .video-studio-pricing-card,
html body[data-credit-wallet] .price-card,
html body[data-credit-wallet] .pricing-drawer,
html body[data-credit-wallet] .campaign-pricing-drawer,
html body[data-credit-wallet] .mst-shared-pricing-panel,
html body[data-credit-wallet] .mst-shared-pricing-card {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Runtime variable-credit widgets inject late, so use their full contract. */
html body [data-credit-wallet].mst-variable-credit-card {
  --mst-credit-accent: inherit;
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
}

html body [data-credit-wallet].mst-variable-credit-card :is(
  .tool-section-label,
  .mst-offer-kicker,
  .mst-variable-credit-title,
  .photo-station-pricing-kicker,
  .photo-station-pricing-title,
  .ai-credit-offer-kicker,
  .ai-credit-offer-title,
  .video-credit-offer-title,
  .video-credit-offer-price,
  .mst-variable-credit-total
) {
  color: var(--mst-credit-primary) !important;
  text-shadow: none !important;
}

html body [data-credit-wallet].mst-variable-credit-card :is(
  .fine-print,
  .mst-offer-copy,
  .mst-variable-credit-description,
  .mst-variable-credit-note,
  .photo-station-pricing-copy,
  .ai-credit-offer-copy,
  .video-credit-offer-copy
) {
  color: var(--mst-credit-secondary) !important;
}

html body [data-credit-wallet].mst-variable-credit-card .mst-variable-credit-note {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  box-shadow: none !important;
}

html body [data-credit-wallet].mst-variable-credit-card :is(
  .mst-offer-kicker,
  .photo-station-pricing-kicker,
  .ai-credit-offer-kicker,
  .video-credit-offer-title,
  .mst-video-rate-chip
) {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body [data-credit-wallet].mst-variable-credit-card .text-input {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
}

html body [data-credit-wallet].mst-variable-credit-card .text-input::placeholder,
html body [data-credit-wallet].mst-variable-credit-card .field-label {
  color: var(--mst-credit-secondary) !important;
}

html body [data-credit-wallet].mst-variable-credit-card .text-input:focus {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  outline: 2px solid var(--mst-credit-accent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

html body [data-credit-wallet].mst-variable-credit-card :is(
  .button-link.primary,
  .btn.btn-primary,
  button.primary,
  button.secondary
):focus-visible {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  outline: 2px solid var(--mst-credit-accent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* SEO photo grids inject a higher-specificity two-card layout after page CSS. */
html body .mst-two-card-offer-grid.mst-variable-credit-has-card > [data-credit-wallet].mst-variable-credit-card {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body .mst-two-card-offer-grid.mst-variable-credit-has-card > [data-credit-wallet].mst-variable-credit-card :is(
  .tool-section-label,
  .mst-offer-kicker,
  .mst-variable-credit-title,
  .photo-station-pricing-kicker,
  .photo-station-pricing-title,
  .ai-credit-offer-kicker,
  .ai-credit-offer-title,
  .mst-variable-credit-total
) {
  color: var(--mst-credit-primary) !important;
  text-shadow: none !important;
}

html body .mst-two-card-offer-grid.mst-variable-credit-has-card > [data-credit-wallet].mst-variable-credit-card :is(
  .tool-section-label,
  .mst-offer-kicker,
  .photo-station-pricing-kicker,
  .ai-credit-offer-kicker
) {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body .mst-two-card-offer-grid.mst-variable-credit-has-card > [data-credit-wallet].mst-variable-credit-card :is(
  .fine-print,
  .mst-offer-copy,
  .mst-variable-credit-description,
  .mst-variable-credit-note,
  .photo-station-pricing-copy,
  .ai-credit-offer-copy
) {
  color: var(--mst-credit-secondary) !important;
  text-shadow: none !important;
}

/* Category labels and supporting copy use the exact SVG text colors. */
html body [data-credit-wallet].card :is(.label, .value),
html body .member-credit-console-item[data-credit-wallet] :is(
  .member-credit-console-label,
  .member-credit-console-value
),
html body .account-credit-package-card[data-credit-wallet] .account-credit-package-title,
html body .account-credit-package-group-card[data-credit-wallet] .account-credit-package-group-head h4,
html body[data-credit-wallet] :is(
  .credit-title,
  .credit-label,
  .price-tag,
  .mst-shared-pricing-eyebrow,
  .mst-shared-pricing-price
),
html body [data-wallet] :is(
  .payment-wallet-label,
  .payment-wallet-key
) {
  color: var(--mst-credit-primary) !important;
  text-shadow: none !important;
}

html body [data-credit-wallet].card .sub,
html body .account-credit-package-card[data-credit-wallet] :is(
  .account-credit-package-meta,
  .account-credit-package-status
),
html body[data-credit-wallet] :is(
  .credit-note,
  .credit-copy,
  .mst-shared-pricing-copy
),
html body [data-wallet] :is(
  .payment-wallet-description,
  .payment-card-heading
) {
  color: var(--mst-credit-secondary) !important;
  text-shadow: none !important;
}

/* Solid exact-accent identity fills replace every candy gradient. */
html body[data-credit-wallet] :is(
  .paid-credit-pill,
  #topCreditPurchaseLink,
  #heroBuyCreditsLink,
  #topVideoCreditPurchaseLink,
  .video-studio-buy-pill,
  .hero-buy-button,
  #openPricingTopButton,
  #openPricingButton,
  #aiProBuyCreditsBtn,
  #unlockLink,
  #trialUnlockLink,
  .pack-button,
  .photo-station-pricing-button,
  .mst-shared-pricing-buy
),
html body [data-credit-wallet] :is(
  .account-credit-package-button,
  [data-mst-ai-credit-checkout],
  [data-mst-credit-checkout]
),
html body [data-credit-wallet].mst-variable-credit-card :is(
  .button-link.primary,
  .btn.btn-primary,
  button.primary,
  button.secondary
) {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-credit-wallet] :is(
  .paid-credit-pill,
  #topCreditPurchaseLink,
  #heroBuyCreditsLink,
  #topVideoCreditPurchaseLink,
  .video-studio-buy-pill,
  .hero-buy-button,
  #openPricingTopButton,
  #openPricingButton,
  #aiProBuyCreditsBtn,
  #unlockLink,
  #trialUnlockLink,
  .pack-button,
  .photo-station-pricing-button,
  .mst-shared-pricing-buy
):hover,
html body [data-credit-wallet] .account-credit-package-button:hover,
html body [data-credit-wallet].mst-variable-credit-card :is(
  .button-link.primary,
  .btn.btn-primary,
  button.primary,
  button.secondary
):hover {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
}

html body[data-credit-wallet] :is(
  .paid-credit-pill,
  #topCreditPurchaseLink,
  #heroBuyCreditsLink,
  #topVideoCreditPurchaseLink,
  .video-studio-buy-pill,
  .hero-buy-button,
  #openPricingTopButton,
  #openPricingButton,
  #aiProBuyCreditsBtn,
  #unlockLink,
  #trialUnlockLink
):focus-visible,
html body [data-credit-wallet] .account-credit-package-button:focus-visible {
  outline: 2px solid var(--mst-credit-accent) !important;
  outline-offset: 2px;
}

/* Account chrome follows the SVG canvas/heading/supporting tokens. */
html body[data-page="account"] {
  background: #05070a !important;
  color: #d9dee7 !important;
}

html body[data-page="account"] :is(
  .topbar,
  .hero,
  .panel,
  .account-tabs,
  .credits-panel,
  .plans-panel,
  .account-plans-shell,
  .account-purchase-grid,
  .credit-packages,
  .purchase-grid,
  .account-subscription-card,
  .member-credit-console
) {
  background: #05070a !important;
  border-color: #7f8794 !important;
  color: #d9dee7 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-page="account"] .credits-grid .card:not([data-credit-wallet]),
html body[data-page="account"] :is(input, select, textarea),
html body[data-page="account"] :is(.btn, .account-tab, .account-subscription-button) {
  background: #05070a !important;
  border-color: #7f8794 !important;
  color: #d9dee7 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body[data-page="account"] .member-credit-console-signal i,
html body[data-page="account"] .member-credit-console-state::before {
  background: #7f8794 !important;
  box-shadow: none !important;
}

html body[data-page="account"] :is(
  .member-credit-console-head,
  .member-credit-console-item
) {
  border-color: #7f8794 !important;
  box-shadow: none !important;
}

html body[data-page="account"] .account-hero::before,
html body[data-page="account"] .account-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body[data-page="account"] :is(.copy, .note, .sub, .account-subscription-note) {
  color: #7f8794 !important;
}

/* Support chrome is flat neutral canvas; wallet cards retain category identity. */
html body[data-page="support"] {
  background: #05070a !important;
  color: #d9dee7 !important;
}

html body[data-page="support"] :is(
  .mst-page-nav,
  .hero,
  .hero-grid,
  .mini-card,
  .support-section-nav,
  .content-card,
  .payment-guide-summary,
  .payment-summary-card,
  .payment-guide-detail-card,
  .stack-card,
  .payment-allowance,
  .payment-guide-status,
  .payment-guide-actions a,
  .check-row,
  .status-box,
  input,
  select,
  textarea
) {
  background: #05070a !important;
  border-color: #7f8794 !important;
  color: #d9dee7 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-page="support"] .payment-wallet-card[data-wallet] {
  background: var(--mst-credit-surface) !important;
  border: 3px solid var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
}

html body[data-page="support"] .payment-wallet-card[data-wallet] .payment-wallet-key {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  box-shadow: none !important;
}

html body[data-page="support"] .payment-wallet-card[data-wallet] :is(
  .payment-purchase-item,
  .payment-charge-item,
  .payment-example-item
) {
  background: #05070a !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
}

html body[data-page="support"] .payment-wallet-card[data-wallet] :is(
  .payment-purchase-item strong,
  .payment-charge-item strong,
  .payment-example-item strong
) {
  color: var(--mst-credit-primary) !important;
  text-shadow: none !important;
}

html body[data-page="support"] .payment-guide-shell::before,
html body[data-page="support"] .payment-guide-kicker::before,
html body[data-page="support"] .payment-guide-status::before {
  content: none !important;
  display: none !important;
}

html body[data-page="support"] .payment-guide-kicker {
  background: #05070a !important;
  border-color: #7f8794 !important;
  color: #d9dee7 !important;
  box-shadow: none !important;
}

html body[data-page="support"] :is(.card-copy, .payment-summary-note, .payment-guide-copy) {
  color: #7f8794 !important;
}

html body[data-page="support"] .hero::before,
html body[data-page="support"] .hero::after,
html body[data-page="support"] .content-card::before,
html body[data-page="support"] .content-card::after,
html body[data-page="support"] .stack-card::before,
html body[data-page="support"] .payment-wallet-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body[data-page="support"] :is(
  .hero h1,
  .content-card h2,
  .content-card h3,
  .payment-guide-title,
  .payment-guide-summary strong,
  .payment-summary-card strong,
  .payment-guide-detail-card h3
) {
  color: #d9dee7 !important;
  text-shadow: none !important;
}

html body[data-page="support"] :is(
  .hero p,
  .payment-guide-lead,
  .payment-guide-summary span,
  .payment-guide-summary small,
  .payment-summary-card span,
  .payment-summary-card small,
  .payment-guide-detail-card p,
  .shared-list,
  .shared-list li
) {
  color: #7f8794 !important;
  text-shadow: none !important;
}

html body[data-page="support"] :is(
  .account-link,
  .support-section-nav a,
  .primary-btn,
  .ghost-btn,
  .mst-page-brand,
  .mst-page-links a,
  .eyebrow
) {
  background: #05070a !important;
  border-color: #7f8794 !important;
  color: #d9dee7 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ID-scoped runtime pricing rules otherwise outrank the shared palette. */
html body[data-page="quick-workflow"] #photoPricingShell#photoPricingShell {
  --mst-credit-surface: #0b1614;
  --mst-credit-accent: #285548;
  --mst-credit-primary: #ced8d5;
  --mst-credit-secondary: #708f85;
  --mst-credit-button-text: #ced8d5;
}

html body[data-page="quick-workflow"] #videoPricingShell#videoPricingShell {
  --mst-credit-surface: #0d1119;
  --mst-credit-accent: #6087bf;
  --mst-credit-primary: #f5f8ff;
  --mst-credit-secondary: #8a97b4;
  --mst-credit-button-text: #f5f8ff;
  --mst-video-accent: #254580;
  --mst-video-accent-deep: #132a56;
}

html body #photoPricingShell#photoPricingShell,
html body #videoPricingShell#videoPricingShell {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body #photoPricingShell#photoPricingShell :is(
  .mst-variable-credit-card,
  .photo-station-pricing-card,
  .service-card
),
html body #videoPricingShell#videoPricingShell :is(
  .mst-variable-credit-card,
  .service-card,
  .video-purchase-card,
  .video-bottom-price-card
) {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body #photoPricingShell#photoPricingShell :is(
  .tool-head h2,
  .mst-offer-kicker,
  .mst-variable-credit-title,
  .mst-variable-credit-total,
  .photo-station-pricing-kicker,
  .service-card h3,
  .service-card > p:not(.pricing-micro-cta),
  .tool-section-label
),
html body #photoPricingShell#photoPricingShell .tool-head h2::before,
html body #photoPricingShell#photoPricingShell .service-card-feature-list::before,
html body #videoPricingShell#videoPricingShell :is(
  .tool-head h2,
  .tool-section-label,
  .mst-variable-credit-title,
  .mst-variable-credit-total,
  .video-credit-offer-title,
  .service-card h3,
  .service-card p,
  .video-purchase-card h3,
  .video-bottom-price-card h3
) {
  color: var(--mst-credit-primary) !important;
  text-shadow: none !important;
}

html body #photoPricingShell#photoPricingShell :is(
  .tool-head p,
  .mst-variable-credit-description,
  .mst-variable-credit-note,
  .mst-offer-copy,
  .photo-station-pricing-copy,
  .service-card-feature-list
),
html body #photoPricingShell#photoPricingShell .pricing-micro-cta::before,
html body #videoPricingShell#videoPricingShell :is(
  .tool-head p,
  .mst-variable-credit-description,
  .mst-variable-credit-note,
  .video-credit-offer-copy,
  .video-purchase-card .fine-print,
  .video-bottom-price-card .fine-print
) {
  color: var(--mst-credit-secondary) !important;
}

html body #photoPricingShell#photoPricingShell :is(
  .mst-offer-button,
  .pricing-card-cta,
  .button-link.primary
),
html body #videoPricingShell#videoPricingShell :is(
  .pricing-card-cta,
  .button-link.primary,
  .mst-video-rate-chip,
  .video-bottom-price-card .primary,
  .video-purchase-card .primary
) {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Campaign pricing uses Creator tokens on its actual card/button classes. */
html body[data-credit-wallet="creator_pack"] :is(
  .campaign-pricing-drawer,
  .price-card,
  .price-card.is-featured
) {
  background: #151209 !important;
  border-color: #574721 !important;
  color: #d8d4ca !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-credit-wallet="creator_pack"] .price-card :is(h3, .price, .price-tag) {
  color: #d8d4ca !important;
  text-shadow: none !important;
}

html body[data-credit-wallet="creator_pack"] .price-card p {
  color: #8e8266 !important;
}

html body[data-credit-wallet="creator_pack"] :is(
  .secondary-button.campaign-pack-button,
  .price-card .secondary-button
) {
  background: #574721 !important;
  border-color: #574721 !important;
  color: #d8d4ca !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body #photoPricingShell#photoPricingShell .text-input:focus,
html body #videoPricingShell#videoPricingShell .text-input:focus {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  outline: 2px solid var(--mst-credit-accent) !important;
  box-shadow: none !important;
}

html body #photoPricingShell#photoPricingShell .tool-section-label,
html body #videoPricingShell#videoPricingShell .tool-section-label,
html body #videoPricingShell#videoPricingShell .service-card::before,
html body #videoPricingShell#videoPricingShell .video-purchase-card::before {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  box-shadow: none !important;
}

/* Late-injected shared creator/document credit bar. */
html body[data-credit-wallet] .mst-shared-credit-shell .mst-hero-credit-topbar,
html body[data-credit-wallet] .mst-shared-credit-shell .mst-shared-pricing-panel,
html body[data-credit-wallet] .mst-shared-credit-shell .mst-shared-pricing-card {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
  filter: none !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell .mst-hero-credit-topbar .hero-credit-count-pill {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell .mst-hero-credit-topbar .paid-credit-pill,
html body[data-credit-wallet] .mst-shared-credit-shell .mst-shared-pricing-buy {
  background: var(--mst-credit-accent) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-button-text) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell .mst-hero-credit-topbar .hero-credit-count-pill::before,
html body[data-credit-wallet] .mst-shared-credit-shell .mst-hero-credit-topbar .hero-credit-count-pill::after {
  content: none !important;
  display: none !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell :is(
  .mst-shared-pricing-eyebrow,
  .mst-shared-pricing-price,
  .hero-credit-count-pill strong
) {
  color: var(--mst-credit-primary) !important;
  text-shadow: none !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell :is(
  .mst-shared-pricing-copy,
  .hero-credit-count-pill span
) {
  color: var(--mst-credit-secondary) !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell :is(
  .mst-shared-pricing-head h2,
  .mst-shared-pricing-card strong,
  .mst-shared-pricing-credits
) {
  color: var(--mst-credit-primary) !important;
  text-shadow: none !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell :is(
  .mst-shared-pricing-head p,
  .mst-shared-pricing-card p,
  .mst-shared-pricing-note
) {
  color: var(--mst-credit-secondary) !important;
}

html body[data-credit-wallet] .mst-shared-credit-shell .mst-shared-pricing-close {
  background: var(--mst-credit-surface) !important;
  border-color: var(--mst-credit-accent) !important;
  color: var(--mst-credit-primary) !important;
  box-shadow: none !important;
}

/* Unified footer stays inside the same neutral reference palette. */
html body[data-page="account"] .mst-unified-footer,
html body[data-page="support"] .mst-unified-footer,
html body[data-page="account"] .mst-unified-footer-group,
html body[data-page="support"] .mst-unified-footer-group {
  background: #05070a !important;
  border-color: #7f8794 !important;
  color: #d9dee7 !important;
  box-shadow: none !important;
}


/* Video Studio injects ID-scoped !important chrome after this stylesheet. */
/* Approved Waveform-blue Video actions across every page profile. */
html body[data-credit-wallet="video_pack"] :is(
  .paid-credit-pill,
  #topCreditPurchaseLink,
  #heroBuyCreditsLink,
  #topVideoCreditPurchaseLink,
  .video-studio-buy-pill,
  .hero-buy-button,
  #openPricingTopButton,
  #openPricingButton,
  .pack-button,
  .mst-shared-pricing-buy
),
html body [data-credit-wallet="video_pack"] :is(
  .account-credit-package-button,
  [data-mst-credit-checkout]
),
html body [data-credit-wallet="video_pack"].mst-variable-credit-card :is(
  .button-link.primary,
  .btn.btn-primary,
  button.primary,
  button.secondary
) {
  background: linear-gradient(180deg, #254580 0%, #132a56 100%) !important;
  border-color: #6087bf !important;
  color: #f5f8ff !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-credit-wallet="video_pack"] :is(
  .paid-credit-pill,
  #topCreditPurchaseLink,
  #heroBuyCreditsLink,
  #topVideoCreditPurchaseLink,
  .video-studio-buy-pill,
  .hero-buy-button,
  #openPricingTopButton,
  #openPricingButton,
  .pack-button,
  .mst-shared-pricing-buy
):is(:hover, :focus-visible),
html body [data-credit-wallet="video_pack"] :is(
  .account-credit-package-button,
  [data-mst-credit-checkout]
):is(:hover, :focus-visible),
html body [data-credit-wallet="video_pack"].mst-variable-credit-card :is(
  .button-link.primary,
  .btn.btn-primary,
  button.primary,
  button.secondary
):is(:hover, :focus-visible) {
  background: #0d1119 !important;
  background-image: none !important;
  border-color: #6087bf !important;
  color: #f5f8ff !important;
}

/* The Video Studio header CTA keeps its original geometry and interaction. */
html body[data-page="video-editing-station"][data-credit-wallet="video_pack"]
  #videoWorkspace
  #topVideoCreditPurchaseLink.video-studio-buy-pill {
  background: linear-gradient(180deg, #254580 0%, #132a56 100%) !important;
  border: 1px solid #6087bf !important;
  color: #f5f8ff !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-page="video-editing-station"][data-credit-wallet="video_pack"]
  #videoWorkspace
  #topVideoCreditPurchaseLink.video-studio-buy-pill:hover,
html body[data-page="video-editing-station"][data-credit-wallet="video_pack"]
  #videoWorkspace
  #topVideoCreditPurchaseLink.video-studio-buy-pill:focus-visible {
  background: #0d1119 !important;
  background-image: none !important;
  border-color: #6087bf !important;
  color: #f5f8ff !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* AI Gen status and member copy: approved purple lettering only. */
html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  .hero-status-chip :is(.hero-status-label, .hero-status-value),
html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  #accountPanelToggleBtn :is(.hero-account-title, .hero-account-meta) {
  color: #82728e !important;
  text-decoration-color: #82728e !important;
}

/* AI Gen pricing controls: purple copy on smoked surfaces, no purple fill. */
html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  .mst-variable-credit-card .ai-credit-offer-kicker,
html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  .mst-variable-credit-card button.primary {
  background: #120e17 !important;
  background-image: none !important;
  border-color: #483557 !important;
  color: #82728e !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  .mst-variable-credit-card button.primary:is(:hover, :focus-visible) {
  background: #120e17 !important;
  background-image: none !important;
  border-color: #82728e !important;
  color: #82728e !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* AI Gen former green cards: match the dark-purple pricing surface. */
html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  .member-menu-top-actions .hero-status-chip,
html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  .member-menu-top-actions #accountPanelToggleBtn.account-panel-launch {
  background: #120e17 !important;
  background-image: none !important;
  border: 1px solid #483557 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"]
  .member-menu-top-actions #accountPanelToggleBtn.account-panel-launch:is(:hover, :focus-visible) {
  background: #120e17 !important;
  background-image: none !important;
  border-color: #82728e !important;
  box-shadow: none !important;
  filter: none !important;
}

/* AI Photo hero badges: match the footer pricing-card surface. */
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"]
  #heroStatusChip.hero-status-chip,
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"]
  #heroBuyCreditsLink.paid-credit-pill,
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"]
  #accountPanelToggleBtn.hero-account-toggle {
  background: #0a1412 !important;
  background-image: none !important;
  border: 1px solid #23493e !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"]
  #heroBuyCreditsLink.paid-credit-pill {
  color: #ced8d5 !important;
}

html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"]
  #heroStatusChip :is(.hero-status-label, .hero-status-value),
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"]
  #accountPanelToggleBtn :is(.hero-account-title, .hero-account-meta, .hero-account-badge) {
  color: #69877c !important;
  text-decoration-color: #69877c !important;
}

html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"]
  :is(#heroBuyCreditsLink.paid-credit-pill, #accountPanelToggleBtn.hero-account-toggle):is(:hover, :focus-visible) {
  background: #0a1412 !important;
  background-image: none !important;
  border-color: #69877c !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Video Waveform blue deployment marker — 2026-07-22 */
/* Waveform blue cache-key blue2 publish — 2026-07-22 */