/* MikeSullyTools flattened palette: base, then overrides. */
/*
 * 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 */

/* 20260731 graphite workflow controls */
/* Quick workflow: neutral graphite controls that blend with the black tool shell. */
html body[data-page="quick-workflow"] {
  --accent: #626870;
  --accent-2: #474c53;
  --accent-3: #c9cdd2;
  --accent-soft: rgba(162, 168, 176, 0.08);
  --border-strong: rgba(212, 218, 226, 0.22);
}

html body[data-page="quick-workflow"] :is(.tool-jump-link, .preset-chip, .finish-option-chip) {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.055), transparent 38%),
    linear-gradient(180deg, #22262c 0%, #111419 100%) !important;
  border-color: rgba(199, 205, 213, 0.16) !important;
  color: #f2f4f7 !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.055),
    0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

html body[data-page="quick-workflow"] :is(.tool-jump-link, .preset-chip, .finish-option-chip):is(:hover, :focus-visible) {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.085), transparent 38%),
    linear-gradient(180deg, #2c3138 0%, #15191e 100%) !important;
  border-color: rgba(220, 224, 230, 0.24) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 15px 28px rgba(0, 0, 0, 0.32) !important;
}

html body[data-page="quick-workflow"] .tool-jump-link.active,
html body[data-page="quick-workflow"] .tool-jump-nav.mode-photo .tool-jump-link[data-nav-target="photoWorkspace"],
html body[data-page="quick-workflow"] .tool-jump-nav.mode-video .tool-jump-link[data-nav-target="videoWorkspace"],
html body[data-page="quick-workflow"] .preset-chip.active,
html body[data-page="quick-workflow"] .finish-option-chip.active,
html body[data-page="quick-workflow"] #processBtn.primary {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.11), transparent 40%),
    linear-gradient(180deg, #3a3f46 0%, #1b1f24 100%) !important;
  border-color: rgba(229, 232, 237, 0.28) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 18px 34px rgba(0, 0, 0, 0.34) !important;
}

html body[data-page="quick-workflow"] #processBtn.primary:is(:hover, :focus-visible) {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.14), transparent 40%),
    linear-gradient(180deg, #444a52 0%, #20242a 100%) !important;
  border-color: rgba(241, 243, 246, 0.34) !important;
}

html body[data-page="quick-workflow"] :is(.preset-pill, .tool-jump-link-state) {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #d9dde3 !important;
}

/* Original palette overrides follow. */


/* Approved AI Image Generator hero pill colors — 2026-08-04. */
body[data-page="ai-image-generator"] .member-menu-top-actions .hero-status-chip,
body[data-page="ai-image-generator"] #topCreditPurchaseLink,
body[data-page="ai-image-generator"] .member-menu-top-actions .account-panel-launch,
body[data-page="ai-image-generator"] .member-menu-top-actions .account-panel-launch.is-active,
body[data-page="ai-image-generator"] .member-menu-top-actions .account-panel-launch.is-open {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(5, 8, 14, 0.99)) !important;
  background-image: linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(5, 8, 14, 0.99)) !important;
  color: #f4f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 26px rgba(0, 0, 0, 0.24) !important;
}

html body[data-page="ai-image-generator"][data-credit-wallet="ai_image_pack"] #topCreditPurchaseLink {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(5, 8, 14, 0.99)) !important;
  background-image: linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(5, 8, 14, 0.99)) !important;
  color: #f4f7fb !important;
}

body[data-page="ai-image-generator"] .member-menu-top-actions .hero-status-label,
body[data-page="ai-image-generator"] .member-menu-top-actions .hero-status-value,
body[data-page="ai-image-generator"] .member-menu-top-actions .hero-account-title,
body[data-page="ai-image-generator"] .member-menu-top-actions .hero-account-meta,
body[data-page="ai-image-generator"] .member-menu-top-actions .hero-account-badge {
  color: #f4f7fb !important;
  text-decoration-color: #f4f7fb !important;
}

body[data-page="ai-image-generator"] .member-menu-top-actions .hero-account-badge {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(5, 8, 14, 0.99)) !important;
  background-image: linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(5, 8, 14, 0.99)) !important;
}

body[data-page="ai-image-generator"] .member-menu-top-actions .service-dot {
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10), 0 0 10px rgba(34, 197, 94, 0.44) !important;
}

body[data-page="ai-image-generator"] .studio-stage-credit-bar {
  border-color: rgba(34, 197, 94, 0.58) !important;
  background: linear-gradient(180deg, rgba(5, 42, 22, 0.98), rgba(2, 18, 10, 0.99)), #03130a !important;
  color: #8ff6b3 !important;
  box-shadow:
    0 0 18px rgba(34, 197, 94, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 18px rgba(34, 197, 94, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="ai-image-generator"] .studio-stage-credit-bar::before {
  background:
    repeating-linear-gradient(90deg, rgba(67, 229, 123, 0.25) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.24), transparent) !important;
  opacity: 0.78 !important;
}

body[data-page="ai-image-generator"] .studio-stage-credit-bar::after {
  background:
    linear-gradient(90deg, rgba(3, 19, 10, 0.2), transparent 18%, transparent 82%, rgba(3, 19, 10, 0.2)),
    repeating-linear-gradient(
      90deg,
      #8ff6b3 0 4px,
      transparent 4px 6px,
      #22c55e 6px 10px,
      transparent 10px 13px
    ) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.44) !important;
}

body[data-page="ai-image-generator"] .studio-stage-credit-bar > span {
  color: #52dd83 !important;
}

body[data-page="ai-image-generator"] .studio-stage-credit-bar strong {
  color: #8ff6b3 !important;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.68) !important;
}

/* AI Photo Studio hero action layout guard — 2026-08-06.
 * Keeps the live status/account/credits/buy pills in their own grid cells and
 * removes decorative credit-meter pseudo-elements that were stacking over the
 * real balance text on the photo studio hero.
 */
html body[data-page="photo-enhancement-station"] .hero-top-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  grid-template-areas:
    "status account"
    "credits buy" !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 8px !important;
  width: min(100%, 470px) !important;
  max-width: 470px !important;
  min-width: min(100%, 360px) !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroStatusChip {
  grid-area: status !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #accountPanelToggleBtn {
  grid-area: account !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter {
  grid-area: credits !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroBuyCreditsLink {
  grid-area: buy !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions
  :is(#heroStatusChip, #accountPanelToggleBtn, #heroCreditMeter, #heroBuyCreditsLink) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-color: #23493e !important;
  background: linear-gradient(180deg, rgba(10, 20, 18, 0.98), rgba(5, 7, 10, 0.99)) !important;
  background-image: linear-gradient(180deg, rgba(10, 20, 18, 0.98), rgba(5, 7, 10, 0.99)) !important;
  color: #ced8d5 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill::before,
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill::after,
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill > span::before,
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill > span::after,
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill strong::before,
html body[data-page="photo-enhancement-station"][data-credit-wallet="ai_photo_pack"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill strong::after,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill::before,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill::after,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill > span::before,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill > span::after,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill strong::before,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill strong::after {
  content: none !important;
  display: none !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill > span,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill strong {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #ced8d5 !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill > span {
  color: #69877c !important;
  font-weight: 800 !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter.hero-credit-count-pill strong {
  flex-shrink: 0 !important;
  color: #ced8d5 !important;
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroBuyCreditsLink.paid-credit-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html body[data-page="photo-enhancement-station"] .hero-top-actions {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "status"
      "account"
      "credits"
      "buy" !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}


/* 20260806-photo-studio-hero-pill-hardfix-v2 */

/* AI Photo Studio hero pill hard repair — 2026-08-06.
   Keep each control in its own grid cell and force the credits pill to plain text. */
html body[data-page="photo-enhancement-station"] .hero-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body[data-page="photo-enhancement-station"] .station-brand-lockup {
  flex: 1 1 420px !important;
  min-width: 260px !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions {
  flex: 0 1 520px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:
    "status account"
    "credits buy" !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroStatusChip {
  grid-area: status !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #accountPanelToggleBtn {
  grid-area: account !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter {
  grid-area: credits !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroBuyCreditsLink {
  grid-area: buy !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions
  :is(#heroStatusChip, #accountPanelToggleBtn, #heroBuyCreditsLink) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter {
  all: unset !important;
  grid-area: credits !important;
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(34, 197, 94, 0.58) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(5, 42, 22, 0.98), rgba(2, 18, 10, 0.995)) !important;
  background-color: #03130a !important;
  color: #8ff6b3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 12px rgba(34, 197, 94, 0.11),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
  font: 900 0.74rem/1 "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: default !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter::before,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter::after,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter *::before,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter *::after {
  content: none !important;
  display: none !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter .hero-credit-waveform,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter .hero-credit-waveform *,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter .hero-credit-balance,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter .hero-credit-key,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter .hero-credit-divider {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter > span,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter .mst-hard-credit-label {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  color: #52dd83 !important;
  font: 900 0.68rem/1 "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter > strong,
html body[data-page="photo-enhancement-station"] .hero-top-actions #heroCreditMeter#heroCreditMeter #heroCreditMeterValue {
  all: unset !important;
  display: inline-block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 13em !important;
  overflow: hidden !important;
  color: #c3ffd6 !important;
  font: 900 0.72rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  letter-spacing: 0.02em !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

@media (max-width: 1120px) {
  html body[data-page="photo-enhancement-station"] .hero-topbar {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  html body[data-page="photo-enhancement-station"] .station-brand-lockup,
  html body[data-page="photo-enhancement-station"] .hero-top-actions {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  html body[data-page="photo-enhancement-station"] .hero-top-actions {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "status"
      "account"
      "credits"
      "buy" !important;
    width: 100% !important;
    max-width: none !important;
  }
}