/*
  Mewart theme contract.

  This file is intentionally loaded after the legacy inline CSS in preview/index.html
  and appended after legacy CSS in the ZMP build. Future UI skills should change
  theme tokens here first instead of adding another override block to index.html.

  Scope:
  - Tokens: brand colors, backgrounds, borders, shadows, text colors.
  - Shared components: shell, bottom tab, cards, buttons, chips, search, AI FAB.
  - Avoid layout-only changes here unless the theme explicitly needs them.
*/

:root,
[data-theme="mewart-default"] {
  /* AI_COLOR_GUIDE_MEWART: color-only palette. Keep layout/spacing in the legacy CSS. */
  --theme-primary: #FF5B8F;
  --theme-primary-deep: #FF3F7F;
  --theme-primary-dark: #E7356E;
  --theme-primary-soft: #F7A7BA;
  --theme-primary-softer: #FFD6E3;
  --theme-bg: #FFF7FA;
  --theme-bg-soft: #FFEFF5;
  --theme-surface: #ffffff;
  --theme-surface-solid: #ffffff;
  --theme-ink: #25242A;
  --theme-body: #6F646B;
  --theme-muted: #A09099;
  --theme-border: rgba(255, 214, 227, 0.82);
  --theme-border-strong: rgba(255, 184, 205, 0.78);
  --theme-chip-bg: #FFF6F9;
  --theme-chip-border: #FFB8CD;
  --theme-success: #25B66D;
  --theme-success-bg: #E8F8EF;
  --theme-rating: #F5A623;
  --theme-premium-bg: #12080D;
  --theme-premium-bg-2: #24101A;
  --theme-premium-border: rgba(255, 124, 168, 0.40);
  --theme-premium-text: #FFFDFE;
  --theme-premium-muted: #F2D6E2;
  --theme-card-shadow: 0 1px 2px rgba(37, 36, 42, 0.06);
  --theme-control-shadow: 0 1px 2px rgba(37, 36, 42, 0.05);
  --theme-button-shadow: 0 1px 2px rgba(255, 63, 127, 0.18);
  --theme-premium-glow: 0 2px 10px rgba(255, 91, 143, 0.12);
  --theme-shell-bg: #FFF7FA;
  --theme-body-bg: #FFF7FA;
  --theme-button-bg: #FF5B8F;
  --theme-button-bg-pressed: #E7356E;
  --theme-card-bg: #ffffff;
  --theme-control-bg: #FFF6F9;
  --theme-premium-card: linear-gradient(145deg, #170A10 0%, #2B0E1B 52%, #431526 100%);
  --theme-premium-card-inner: #1F0C15;
  --theme-ai-fab-bg: linear-gradient(135deg, #170A10 0%, #2B0E1B 44%, #FF3F7F 100%);

  /* Legacy aliases. Existing CSS should keep working while themes move here. */
  --ds-primary: var(--theme-primary);
  --ds-primary-deep: var(--theme-primary-deep);
  --ds-primary-dark: var(--theme-primary-dark);
  --ds-secondary: var(--theme-primary-soft);
  --ds-secondary-soft: var(--theme-primary-softer);
  --ds-tertiary: var(--theme-bg);
  --ds-surface: var(--theme-bg-soft);
  --ds-card: var(--theme-surface);
  --ds-neutral: var(--theme-muted);
  --ds-ink: var(--theme-ink);
  --ds-body: var(--theme-body);
  --ds-hairline: var(--theme-border);
  --primary: var(--theme-primary);
  --primary-dark: var(--theme-primary-deep);
  --primary-light: var(--theme-primary-soft);
  --primary-bg: var(--theme-bg);
  --mew-pink: var(--theme-primary);
  --mew-pink-deep: var(--theme-primary-deep);
  --mew-pink-soft: var(--theme-primary-soft);
  --fg: var(--theme-ink);
  --fg-muted: var(--theme-body);
  --fg-light: var(--theme-muted);
  --bg: var(--theme-bg);
  --border: var(--theme-border);
}

button,
.btn,
[onclick],
.tab-item,
.filter-pill,
.product-grid-card,
.home-product-card,
.course-card,
.order-full {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--theme-body-bg) !important;
}

.phone-frame,
.page,
.home-shell,
.cart-page,
.notifications-page {
  background: var(--theme-shell-bg) !important;
  color: var(--theme-ink) !important;
}

.home-brand,
.screen-title,
.notifications-title,
.section-title,
.course-list-title,
.product-list-head strong,
.cart-total-pink,
.product-grid-price,
.home-product-price,
.home-course-price,
.product-price,
.course-price-stack strong,
.cart-total-row.total strong,
.order-total,
.voucher-discount {
  color: var(--theme-primary-deep) !important;
}

.home-hello,
.promo-title,
.cart-name,
.product-grid-name,
.course-page-title,
.course-overview-title,
.course-next-title,
.order-full-id {
  color: var(--theme-ink) !important;
}

.home-member-date,
.promo-sub,
.cart-meta,
.product-grid-cat,
.product-card-rating,
.course-page-meta,
.course-next-name,
.course-overview-text,
.product-list-head span,
.order-full-date {
  color: var(--theme-muted) !important;
}

.search-pill,
.product-search-box,
.screen-round-action,
.cart-window-actions,
.course-round-next,
.course-status-pill,
.course-type-chip,
.home-course-type,
.product-category-chip,
.filter-pill,
.tab-bar {
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-border-strong) !important;
  box-shadow: var(--theme-control-shadow) !important;
  color: var(--theme-muted) !important;
}

.badge,
.ai-chat-suggest-btn,
.ai-combo-tag,
.return-status-chip,
.voucher-row-code {
  background: var(--theme-chip-bg) !important;
  border-color: var(--theme-chip-border) !important;
  color: var(--theme-primary) !important;
}

.badge-free,
.badge-normal,
.badge-completed,
.status.done {
  background: var(--theme-success-bg) !important;
  color: var(--theme-success) !important;
}

.badge-hot,
.badge-sale,
.badge-soon,
.ai-combo-tag-active {
  background: #FFEAF2 !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary-deep) !important;
}

.promo-hero,
.cart-summary-card,
.course-overview-card,
.course-next-card,
.product-grid-card,
.home-course-card,
.home-product-card,
.course-page-card,
.quick-strip,
.cart-items-card,
.cart-voucher-row,
.cart-total-card,
.support-banner,
.card,
.notif-row,
.order-full,
.checkout-section,
.profile-card,
.profile-utility,
.voucher-card,
.repurchase-card {
  background: var(--theme-card-bg) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: var(--theme-card-shadow) !important;
}

.btn-primary,
.checkout-paybar,
.promo-btn,
.course-cta:not(.outline),
.support-cta,
.profile-referral-btn,
.product-select-btn,
.round-add,
.product-category-chip.active,
.course-status-pill.active,
.filter-pill.active,
.cart-check,
.ai-chat-start-btn,
.ai-chat-send-btn,
.ai-chat-inline-buy,
.ai-combo-buy-btn {
  background: var(--theme-button-bg) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  color: #ffffff !important;
  box-shadow: var(--theme-button-shadow) !important;
  text-shadow: none !important;
}

.btn-secondary,
.btn-outline,
.course-cta.outline,
.course-page-card .course-cta.outline,
.ai-chat-inline-continue {
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--theme-primary-deep) !important;
  border-color: rgba(255, 77, 141, 0.36) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.tab-item.active svg.tab-icon,
.tab-item.active .tab-label,
.screen-round-action,
.cart-window-btn,
.btn-ghost,
.course-list-more,
.voucher-action,
.qty-btn,
.cart-remove {
  color: var(--theme-primary-deep) !important;
}

.tab-item.active .tab-indicator,
.course-overview-progress span,
.course-progress-line span {
  background: linear-gradient(90deg, var(--theme-primary), #ff85b3) !important;
}

.ai-chat-fab {
  background: var(--theme-ai-fab-bg) !important;
}

.product-grid-card,
.home-product-card,
.ai-product-card,
.ai-cross-product,
.ai-chat-inline-combo,
.ai-combo-hero,
.ai-combo-card,
.review-card {
  background: var(--theme-premium-card) !important;
  border-color: var(--theme-premium-border) !important;
  box-shadow: var(--theme-premium-glow) !important;
  color: var(--theme-premium-text) !important;
}

.ai-chat-inline-combo-head {
  background: var(--theme-premium-card-inner) !important;
  border-bottom-color: rgba(255, 91, 143, 0.24) !important;
}

.ai-chat-inline-kicker {
  color: #FF7CA8 !important;
}

.product-grid-card .product-grid-name,
.home-product-card .home-product-title,
.ai-product-card .ai-product-name,
.ai-cross-product .ai-cross-name,
.ai-chat-inline-title,
.ai-chat-inline-product-name strong,
.ai-combo-hero-title,
.ai-combo-title,
.ai-combo-item-name,
.ai-combo-section-title,
.ai-reason-title,
.ai-combo-step-time,
.ai-combo-step-name,
.review-card strong {
  color: var(--theme-premium-text) !important;
}

.product-grid-card .product-grid-cat,
.product-grid-card .product-card-rating span,
.home-product-card .home-product-sub,
.ai-product-card .ai-product-desc,
.ai-cross-product .ai-cross-old,
.ai-chat-inline-subtitle,
.ai-chat-inline-product-desc,
.ai-chat-inline-pricebox span,
.ai-chat-inline-note,
.ai-combo-hero-sub,
.ai-combo-item-desc,
.ai-combo-original,
.ai-combo-price,
.ai-combo-shipping,
.ai-reason-text,
.ai-combo-step-desc,
.review-comment {
  color: var(--theme-premium-muted) !important;
}

.product-grid-card .product-grid-price,
.home-product-card .home-product-price,
.ai-product-card .ai-product-price,
.ai-cross-product .ai-cross-price,
.ai-chat-inline-product-price,
.ai-combo-price strong,
.review-top span,
.product-card-rating b {
  color: #FF7CA8 !important;
}

.product-price-stack {
  display: flex !important;
  align-items: center !important;
  gap: 5px 7px !important;
  flex-wrap: wrap !important;
  line-height: 1.18 !important;
}

.product-price-stack .product-sale-price {
  color: #FF7CA8 !important;
  font-weight: 950 !important;
}

.product-price-stack .product-market-price {
  color: rgba(255, 222, 236, 0.68) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.product-price-stack .product-discount-badge {
  border: 1px solid rgba(255, 124, 168, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(255, 237, 245, 0.98) !important;
  color: #b91563 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  padding: 2px 6px !important;
  box-shadow: 0 1px 3px rgba(255, 75, 151, 0.18) !important;
}

.product-card-bottom .product-price-stack {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.product-detail-price.product-price-stack {
  margin-top: 12px !important;
  font-size: 24px !important;
}

.product-detail-price.product-price-stack .product-market-price {
  flex-basis: 100% !important;
  font-size: 13px !important;
  color: var(--theme-premium-muted) !important;
}

.product-detail-price.product-price-stack .product-discount-badge {
  font-size: 11px !important;
  padding: 3px 8px !important;
}

.product-saving-line {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 124, 168, 0.13) !important;
  color: #ffd8e8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#page-product-detail {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 89, 150, 0.28), transparent 34%),
    linear-gradient(180deg, #13040d 0%, #050206 62%, #020103 100%) !important;
  padding-bottom: 0 !important;
}

#page-product-detail .product-detail-page {
  min-height: 100% !important;
  background:
    radial-gradient(circle at 88% 28%, rgba(255, 76, 147, 0.20), transparent 30%),
    linear-gradient(180deg, rgba(42, 8, 24, 0.72), rgba(3, 1, 4, 0.98) 54%) !important;
}

#page-product-detail .product-detail-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 152, 196, 0.18) !important;
  background: rgba(20, 4, 13, 0.92) !important;
  color: #fff7fb !important;
  backdrop-filter: blur(18px) !important;
}

#page-product-detail .product-detail-nav .page-nav-title,
#page-product-detail .product-detail-nav .page-nav-back {
  color: #fff7fb !important;
}

#page-product-detail .product-detail-nav .page-nav-title {
  font-size: 17px !important;
  font-weight: 950 !important;
}

.swipe-hint {
  color: rgba(255, 219, 235, 0.72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#page-product-detail .product-detail-hero {
  position: relative !important;
}

#page-product-detail .product-detail-img {
  position: relative !important;
  height: 306px !important;
  padding: 12px !important;
  border-radius: 0 0 34px 34px !important;
  overflow: hidden !important;
  cursor: zoom-in !important;
  touch-action: pan-y !important;
  background:
    rgba(255, 255, 255, 0.82),
    #fff0f7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.20) inset !important;
}

#page-product-detail .product-detail-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 1px 3px rgba(105, 18, 60, 0.18) !important;
}

.product-image-count {
  position: absolute !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(24, 3, 13, 0.72) !important;
  color: #fff7fb !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 3px rgba(30, 8, 19, 0.22) !important;
  top: 18px !important;
  right: 18px !important;
  min-width: 42px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

#page-product-detail .product-detail-sheet {
  position: relative !important;
  z-index: 2 !important;
  margin: 10px 12px 0 !important;
  padding: 18px 16px 0 !important;
  border-radius: 30px 30px 0 0 !important;
  border: 1px solid rgba(255, 126, 178, 0.28) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 88, 153, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(30, 8, 19, 0.98), rgba(8, 2, 7, 0.98) 56%, rgba(3, 1, 4, 0.99)) !important;
  box-shadow: 0 -10px 32px rgba(255, 71, 142, 0.16), 0 22px 60px rgba(0, 0, 0, 0.42) !important;
}

.product-detail-kicker {
  display: inline-flex !important;
  max-width: 100% !important;
  margin-bottom: 9px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 124, 168, 0.12) !important;
  color: #ffb8d4 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#page-product-detail .product-detail-name {
  color: #fff7fb !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 21px !important;
  line-height: 1.28 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 10px !important;
}

#page-product-detail .product-detail-rating {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 7px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffd05f !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

#page-product-detail .product-detail-rating b {
  color: #fff7fb !important;
  font-weight: 950 !important;
}

#page-product-detail .product-detail-rating small {
  color: rgba(255, 225, 238, 0.84) !important;
  font-weight: 800 !important;
}

.product-price-panel {
  margin: 12px 0 14px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background:
    rgba(255, 255, 255, 0.18),
    linear-gradient(135deg, rgba(255, 63, 143, 0.22), rgba(255, 123, 179, 0.08)) !important;
  border: 1px solid rgba(255, 126, 178, 0.30) !important;
}

#page-product-detail .product-detail-price.product-price-stack {
  margin-top: 0 !important;
  font-size: 26px !important;
}

#page-product-detail .product-detail-price .product-sale-price {
  color: #ff7fb2 !important;
  text-shadow: 0 8px 24px rgba(255, 60, 142, 0.28) !important;
}

#page-product-detail .product-detail-price.product-price-stack .product-market-price {
  color: rgba(255, 233, 242, 0.82) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#page-product-detail .product-saving-line {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff0f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

#page-product-detail .product-detail-lead,
#page-product-detail .product-detail-desc {
  color: rgba(255, 235, 243, 0.86) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

#page-product-detail .product-info-card.product-detail-section {
  padding: 15px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 119, 174, 0.30) !important;
}

.product-detail-gallery {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 10px 18px 4px !important;
  scrollbar-width: none !important;
}

.product-detail-gallery::-webkit-scrollbar {
  display: none !important;
}

.product-gallery-thumb {
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  padding: 3px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 171, 205, 0.42) !important;
  background: rgba(255, 248, 251, 0.24) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}

.product-gallery-thumb.active {
  border-color: rgba(255, 214, 83, 0.92) !important;
  background: #fff7ca !important;
  box-shadow: 0 1px 3px rgba(255, 83, 156, 0.28), 0 0 0 2px rgba(255, 255, 255, 0.22) inset !important;
}

.product-gallery-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

.product-image-viewer {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 390;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 4, 7, 0.92);
  backdrop-filter: blur(14px);
  touch-action: none;
  overflow: hidden;
}

.product-image-viewer.show {
  display: flex;
}

.product-image-frame {
  width: 100%;
  max-height: 88%;
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: center;
}

.product-image-frame img {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 16px;
  background: #050407;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.26), 0 0 0 1px rgba(255, 91, 143, 0.28);
  transform-origin: center center;
  transition: transform 0.08s ease-out;
  will-change: transform;
}

.product-image-viewer.is-zoomed .product-image-frame img {
  cursor: grab;
  transition: none;
}

.product-image-caption {
  max-width: 96%;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255, 248, 250, 0.10);
  border: 1px solid rgba(255, 91, 143, 0.28);
  color: var(--theme-premium-text);
  text-align: center;
}

.product-image-caption strong {
  max-width: 100%;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-image-caption span {
  color: rgba(255, 235, 244, 0.78);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.product-image-close,
.product-image-nav {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 91, 143, 0.32);
  background: rgba(255, 248, 250, 0.12);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.product-image-close {
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.product-image-nav {
  top: 50%;
  width: 42px;
  height: 54px;
  border-radius: 999px;
  transform: translateY(-50%);
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
}

.product-image-nav.prev { left: 10px; }
.product-image-nav.next { right: 10px; }

#page-product-detail .detail-block-title,
#page-product-detail .product-review-head span,
#page-product-detail .product-qty-card strong {
  color: #fff9fc !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#page-product-detail .product-info-grid {
  gap: 12px !important;
  margin: 12px 0 !important;
}

#page-product-detail .product-info-grid div {
  min-height: 82px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #fff7fb !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 1px 3px rgba(130, 25, 76, 0.16) !important;
}

#page-product-detail .product-info-grid strong {
  color: #dc2f81 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#page-product-detail .product-info-grid span {
  color: #7b405b !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.product-review-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 18px 0 10px !important;
}

.product-review-head small,
.product-qty-card span {
  color: rgba(255, 225, 238, 0.78) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#page-product-detail .review-card,
#page-product-detail .review-empty {
  padding: 14px !important;
  border-radius: 16px !important;
  background: #fff8fb !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 1px 3px rgba(132, 26, 80, 0.14) !important;
}

.review-empty {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  color: #713550 !important;
}

.review-empty > span {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  color: #ff4f9e !important;
  background: rgba(255, 79, 158, 0.12) !important;
  flex-shrink: 0 !important;
}

.review-empty strong {
  display: block !important;
  color: #5c213d !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  margin-bottom: 3px !important;
}

.review-empty small {
  display: block !important;
  color: #8a5470 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

#page-product-detail .review-comment {
  color: #70415a !important;
  font-weight: 750 !important;
}

.rating-stars {
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: 1px !important;
  color: #ffc83d !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  background: #fff7aa !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55)) drop-shadow(0 3px 6px rgba(255, 164, 0, 0.35)) !important;
}

.review-media-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 7px !important;
  margin-top: 10px !important;
}

.review-media-item {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255, 121, 174, 0.18) !important;
  background: #fff0f6 !important;
}

.review-admin-reply {
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255, 79, 158, 0.12), rgba(255, 221, 237, 0.60)) !important;
  border: 1px solid rgba(255, 79, 158, 0.20) !important;
}

.review-admin-reply strong {
  display: block !important;
  color: #c61d71 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  margin-bottom: 4px !important;
}

.review-admin-reply span {
  color: #623047 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

.product-review-form,
.review-gate-card {
  margin: 16px 0 4px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 144, 193, 0.28) !important;
  color: #fff0f7 !important;
}

.product-review-form-head strong {
  display: block !important;
  color: #fff9fc !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.product-review-form-head span,
.review-gate-card {
  display: block !important;
  color: rgba(255, 226, 239, 0.82) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}

.review-field-row {
  display: grid !important;
  grid-template-columns: 76px 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.review-field-row label {
  color: #ffd9e9 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.review-rating-row {
  display: block !important;
  align-items: flex-start !important;
  margin-top: 12px !important;
}

.review-star-picker {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 5px !important;
  overflow: visible !important;
  padding: 6px !important;
  border-radius: 16px !important;
  background: rgba(255, 249, 252, 0.98) !important;
  border: 1px solid rgba(255, 190, 217, 0.62) !important;
  box-shadow: 0 1px 3px rgba(110, 22, 68, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.review-star-choice {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 7px 3px 6px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255, 165, 199, 0.78) !important;
  background: #ffffff !important;
  color: #7a3655 !important;
  font-weight: 950 !important;
  text-align: center !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  box-shadow: 0 1px 3px rgba(118, 23, 68, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.review-star-choice::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px 2px auto !important;
  height: 42% !important;
  border-radius: 14px 14px 10px 10px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  pointer-events: none !important;
}

.review-star-choice.active {
  border-color: rgba(255, 209, 61, 0.92) !important;
  background: #fff9be !important;
  color: #5f2600 !important;
  box-shadow: 0 1px 3px rgba(255, 164, 0, 0.38), 0 0 0 1px rgba(255, 245, 179, 0.55) inset, inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.review-star-glow {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  color: #ffb000 !important;
  letter-spacing: -2px !important;
  font-size: 12.5px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  -webkit-text-fill-color: #ffb000 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.90), 0 2px 6px rgba(255, 150, 0, 0.34) !important;
}

.review-star-choice.active .review-star-glow {
  color: #fff6a8 !important;
  text-shadow: 0 1px 0 rgba(122, 57, 0, 0.30), 0 4px 10px rgba(255, 125, 0, 0.45) !important;
}

.review-star-count {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 36px !important;
  padding: 3px 7px 4px !important;
  border-radius: 999px !important;
  color: #5e1737 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 4px 9px rgba(119, 32, 72, 0.10) !important;
}

.review-star-count b {
  font-size: 13.5px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.02em !important;
}

.review-star-count em {
  font-size: 9.5px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

.review-star-choice.active .review-star-count {
  color: #5f2600 !important;
  background: rgba(255, 255, 255, 0.54) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.review-field-row select,
.review-textarea,
.review-file-input {
  width: 100% !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 169, 205, 0.34) !important;
  background: rgba(255, 248, 251, 0.96) !important;
  color: #381425 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 10px !important;
}

.review-textarea {
  min-height: 92px !important;
  margin-top: 12px !important;
  padding: 14px 15px !important;
  resize: none !important;
  border-radius: 16px !important;
  border-color: rgba(255, 188, 216, 0.72) !important;
  background: #fffafc !important;
  color: #4a1b31 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.45 !important;
  box-shadow: 0 1px 3px rgba(117, 24, 70, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
  outline: none !important;
  caret-color: #e91e7b !important;
}

.review-textarea::placeholder {
  color: rgba(74, 27, 49, 0.76) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  letter-spacing: -0.01em !important;
}

.review-textarea:focus {
  border-color: rgba(255, 105, 168, 0.84) !important;
  box-shadow: 0 1px 3px rgba(255, 66, 145, 0.18), 0 0 0 3px rgba(255, 101, 169, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.review-textarea.small {
  min-height: 54px !important;
}

.review-file-input {
  margin-top: 10px !important;
}

.review-native-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.review-upload-box {
  position: relative !important;
  margin-top: 10px !important;
}

.review-upload-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 11px 13px !important;
  border-radius: 15px !important;
  cursor: pointer !important;
  background: #fff9fc !important;
  border: 1px solid rgba(255, 169, 205, 0.48) !important;
  color: #421728 !important;
  box-shadow: 0 1px 3px rgba(111, 24, 67, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

.review-upload-trigger span {
  flex-shrink: 0 !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff66aa 0%, #e91e7b 100%) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 1px 3px rgba(255, 70, 145, 0.30) !important;
}

.review-upload-trigger small {
  color: #80425f !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  text-align: right !important;
}

.review-upload-summary {
  margin-top: 7px !important;
  color: rgba(255, 232, 242, 0.84) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.review-upload-summary.has-files {
  color: #ffe28d !important;
  text-shadow: 0 2px 8px rgba(255, 176, 0, 0.18) !important;
}

.review-upload-note {
  margin-top: 4px !important;
  color: rgba(255, 224, 238, 0.72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

.review-submit-btn {
  width: 100% !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
}

#page-product-detail .related-blog {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #fffaf1 !important;
  border: 1px solid rgba(255, 226, 177, 0.92) !important;
  box-shadow: 0 1px 3px rgba(118, 60, 10, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

#page-product-detail .related-blog > span {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  color: #ff4f9e !important;
  background: rgba(255, 79, 158, 0.12) !important;
  border: 1px solid rgba(255, 79, 158, 0.16) !important;
}

#page-product-detail .related-blog strong {
  display: block !important;
  color: #e91e7b !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

#page-product-detail .related-blog small {
  display: block !important;
  margin-top: 4px !important;
  color: #805067 !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1.42 !important;
  opacity: 1 !important;
}

.product-qty-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: 14px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 119, 174, 0.24) !important;
}

.product-qty-card > div:first-child {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#page-product-detail .product-qty-card strong {
  display: block !important;
  color: #fff9fc !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

#page-product-detail .product-qty-card > div:first-child span {
  display: block !important;
  color: rgba(255, 229, 240, 0.92) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

#page-product-detail .qty-selector {
  margin: 0 !important;
  gap: 12px !important;
}

#page-product-detail .qty-value {
  color: #fff7fb !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

#page-product-detail .qty-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255, 142, 188, 0.70) !important;
  background: #fff8fb !important;
  color: #e63285 !important;
  font-weight: 950 !important;
  box-shadow: 0 1px 3px rgba(255, 71, 142, 0.20) !important;
}

#page-product-detail .product-detail-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255, 166, 204, 0.22) !important;
  background: linear-gradient(180deg, rgba(14, 3, 10, 0.78), rgba(8, 1, 5, 0.96)) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.34), 0 -1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

#page-product-detail .product-detail-footer .btn {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
}

#page-product-detail .product-detail-footer .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff7fb !important;
  border-color: rgba(255, 161, 202, 0.58) !important;
}

#page-product-detail .product-detail-footer .btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #ff5ca3 0%, #e91e7b 100%) !important;
  box-shadow: 0 1px 3px rgba(255, 72, 146, 0.38) !important;
}

.product-grid-img,
.home-product-img,
.ai-product-img,
.ai-cross-img,
.ai-chat-inline-product-img,
.ai-combo-img,
.ai-combo-visual,
.ai-combo-step-img {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 124, 168, 0.18), transparent 56%),
    #FFF2F6 !important;
  border-color: rgba(255, 91, 143, 0.24) !important;
}

.ai-chat-inline-product,
.ai-chat-inline-pricebox,
.ai-combo-pricing,
.ai-combo-benefits-section,
.ai-combo-reason,
.ai-combo-routine-section,
.ai-combo-step-card,
.combo-box {
  background: rgba(9, 5, 8, 0.78) !important;
  border-color: rgba(255, 91, 143, 0.24) !important;
}

.ai-chat-product-btn,
.ai-product-add,
.ai-chat-inline-continue,
.ai-action-continue {
  background: #FFF2F7 !important;
  border-color: var(--theme-chip-border) !important;
  color: var(--theme-primary-deep) !important;
}

/* Premium pink/black trial: color-only pass for the broader app shell. */
.home-shell,
.profile-page,
.cart-page,
.notifications-page,
.page {
  background:
    rgba(255, 234, 242, 0.96) !important;
}

.home-top,
.home-hero,
.profile-hero,
.screen-hero,
.cart-top {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 124, 168, 0.26), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(255, 91, 143, 0.20), transparent 34%),
    var(--theme-premium-card) !important;
  color: var(--theme-premium-text) !important;
  border-color: var(--theme-premium-border) !important;
  box-shadow: var(--theme-premium-glow) !important;
}

.home-brand,
.home-hello,
.screen-title,
.profile-hero-name,
.cart-top .screen-title,
.home-top .home-brand {
  color: var(--theme-premium-text) !important;
  text-shadow: 0 2px 16px rgba(255, 91, 143, 0.18) !important;
}

.home-member-date,
.profile-hero-sub,
.tier-points,
.hero-greeting,
.hero-metric-label {
  color: var(--theme-premium-muted) !important;
}

.member-pill,
.hero-tier,
.profile-sync-pill,
.hero-metric-card,
.hero-bell,
.home-avatar,
.profile-avatar,
.screen-round-action,
.profile-round-action,
.cart-window-actions,
.cart-window-btn {
  background: rgba(255, 248, 250, 0.94) !important;
  border-color: rgba(255, 184, 205, 0.70) !important;
  color: var(--theme-primary-deep) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.surface-deck,
.courses-deck,
.profile-content-deck,
.cart-deck,
.product-category-deck,
.product-results-panel {
  background:
    rgba(255, 247, 250, 0.94) !important;
  box-shadow: 0 -12px 34px rgba(20, 7, 13, 0.06) !important;
}

.promo-hero,
.support-banner,
.profile-referral,
.student-honor-card,
.cart-summary-card,
.course-overview-card,
.course-next-card,
.course-page-card,
.home-course-card,
.learning-summary,
.voucher-card,
.voucher-row,
.repurchase-card,
.order-quick,
.order-full,
.profile-utility,
.profile-contact-row,
.menu-item {
  background: var(--theme-premium-card) !important;
  border-color: var(--theme-premium-border) !important;
  box-shadow: var(--theme-premium-glow) !important;
  color: var(--theme-premium-text) !important;
}

.promo-kicker,
.home-course-type,
.course-type-chip,
.course-status-pill,
.product-category-chip,
.filter-pill,
.voucher-row-code,
.return-status-chip,
.badge:not(.badge-free):not(.badge-normal):not(.badge-completed) {
  background: rgba(255, 246, 249, 0.96) !important;
  border-color: var(--theme-chip-border) !important;
  color: var(--theme-primary-deep) !important;
}

.promo-title,
.promo-title b,
.promo-sub b,
.support-title,
.course-overview-title,
.course-next-title,
.course-page-title,
.home-course-title,
.learning-summary strong,
.voucher-discount,
.voucher-code,
.order-quick-id,
.order-quick-amount,
.order-full-id,
.profile-card-title,
.profile-contact-value,
.profile-utility-label,
.profile-support-label,
.profile-referral-title,
.profile-referral-text,
.menu-label,
.cart-name,
.cart-total-pink,
.cart-total-row.total strong {
  color: var(--theme-premium-text) !important;
}

.promo-sub,
.support-text,
.course-overview-text,
.course-next-name,
.course-next-meta,
.course-page-meta,
.course-price-stack,
.voucher-title,
.voucher-exp,
.order-full-date,
.profile-contact-label,
.profile-utility-arrow,
.profile-support-arrow,
.menu-arrow,
.cart-meta,
.cart-total-row span {
  color: var(--theme-premium-muted) !important;
}

.home-course-price,
.course-price-stack strong,
.course-overview-percent,
.course-list-title,
.course-list-more,
.cart-total-row.total strong,
.cart-total-pink,
.voucher-action,
.qty-btn,
.cart-remove {
  color: #FF7CA8 !important;
}

.action-item,
.quick-strip,
.profile-card,
.checkout-section,
.cart-items-card,
.cart-voucher-row,
.cart-total-card,
.notif-row,
.profile-support-card {
  background: #FFFFFF !important;
  border-color: rgba(255, 214, 227, 0.86) !important;
  box-shadow: var(--theme-card-shadow) !important;
  color: var(--theme-ink) !important;
}

.action-label,
.profile-card .profile-card-title,
.profile-card .profile-contact-value,
.profile-card .profile-order-label,
.profile-support-card .profile-support-title,
.profile-support-card .profile-support-label,
.checkout-section,
.checkout-section strong,
.cart-items-card .cart-name,
.cart-voucher-row .cart-name,
.cart-total-card .cart-total-row strong,
.notif-row strong {
  color: var(--theme-ink) !important;
}

.action-icon,
.profile-contact-icon,
.profile-order-icon,
.profile-utility-icon,
.profile-support-icon,
.course-overview-icon,
.course-next-icon,
.order-quick-icon,
.menu-icon,
.cart-summary-icon {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 124, 168, 0.18), transparent 56%),
    #FFF2F6 !important;
  color: var(--theme-primary-deep) !important;
  border-color: rgba(255, 91, 143, 0.24) !important;
}

/* Decorative beauty accents for home cards, tips, voucher and blog pages. */
.card,
.quick-strip,
.blog-mini-card,
.blog-card,
.blog-content,
.blog-related-product,
.student-result-mini,
.student-result-card,
.empty-inline-card,
.voucher-choice,
.payment-choice {
  position: relative !important;
  overflow: hidden !important;
}

.card {
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 91, 143, 0.18), transparent 28%),
    radial-gradient(circle at 8% 88%, rgba(255, 124, 168, 0.14), transparent 24%),
    rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(255, 184, 205, 0.72) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.card::before,
.blog-mini-card::before,
.blog-card::before,
.blog-content::before {
  content: '✦' !important;
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  color: rgba(255, 91, 143, 0.22) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  text-shadow: 0 0 18px rgba(255, 91, 143, 0.22) !important;
}

.card::after,
.blog-mini-card::after,
.blog-card::after,
.blog-content::after,
.empty-inline-card::after {
  content: '♥' !important;
  position: absolute !important;
  left: 18px !important;
  bottom: 14px !important;
  color: rgba(255, 124, 168, 0.16) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.card .section-title,
.card .btn-ghost,
.blog-hero-title,
.blog-detail-title,
.blog-product-link,
.student-results-hero .blog-hero-title {
  color: var(--theme-primary-deep) !important;
}

.blog-mini-card,
.blog-card,
.student-result-mini,
.student-result-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 124, 168, 0.16), transparent 28%),
    #FFFFFF !important;
  border-color: rgba(255, 184, 205, 0.78) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.blog-mini-title,
.blog-title,
.student-result-title {
  color: var(--theme-ink) !important;
}

.blog-mini-text,
.blog-excerpt,
.student-result-meta,
.student-result-story {
  color: var(--theme-body) !important;
}

.blog-chip,
.student-tag-row span,
.student-metric-row span,
.promo-kicker {
  background: rgba(255, 246, 249, 0.98) !important;
  border-color: var(--theme-chip-border) !important;
  color: var(--theme-primary-deep) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.08) !important;
}

.blog-hero,
.student-results-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 124, 168, 0.26), transparent 26%),
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.24), transparent 28%),
    var(--theme-premium-card) !important;
  border-color: var(--theme-premium-border) !important;
  box-shadow: var(--theme-premium-glow) !important;
}

.blog-hero::before,
.student-results-hero::before {
  content: '✦' !important;
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  color: rgba(255, 248, 250, 0.26) !important;
  font-size: 16px !important;
  pointer-events: none !important;
}

.blog-hero::after,
.student-results-hero::after {
  content: '♥' !important;
  position: absolute !important;
  right: 42px !important;
  bottom: 18px !important;
  color: rgba(255, 124, 168, 0.28) !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

.blog-hero-kicker,
.blog-hero-text,
.student-results-hero .blog-hero-text {
  color: var(--theme-premium-muted) !important;
}

.blog-hero .blog-hero-title,
.student-results-hero .blog-hero-title {
  color: var(--theme-premium-text) !important;
}

.blog-detail-img {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 124, 168, 0.18), transparent 56%),
    #FFF2F6 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12) !important;
}

.blog-detail-excerpt {
  color: var(--theme-body) !important;
}

.blog-content,
.blog-related-product {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.14), transparent 28%),
    #FFFFFF !important;
  border-color: rgba(255, 184, 205, 0.78) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  color: var(--theme-ink) !important;
}

.voucher-scroll,
.student-home-stack {
  position: relative !important;
}

.voucher-card,
.voucher-row,
.repurchase-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 124, 168, 0.18), transparent 28%),
    var(--theme-premium-card) !important;
  border-color: rgba(255, 91, 143, 0.30) !important;
}

.empty-inline-card {
  background:
    radial-gradient(circle at 14% 52%, rgba(255, 124, 168, 0.18), transparent 24%),
    #FFF7FA !important;
  border-color: rgba(255, 184, 205, 0.72) !important;
  color: var(--theme-body) !important;
}

.empty-inline-card svg {
  color: var(--theme-primary-deep) !important;
  filter: drop-shadow(0 8px 16px rgba(255, 63, 127, 0.18)) !important;
}

.quick-strip {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 91, 143, 0.14), transparent 24%),
    radial-gradient(circle at 90% 12%, rgba(255, 124, 168, 0.12), transparent 28%),
    #FFFFFF !important;
  border-color: rgba(255, 184, 205, 0.70) !important;
}

.quick-strip .action-item {
  background: rgba(255, 255, 255, 0.54) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.action-badge,
.profile-new-badge,
.hero-bell .dot,
.profile-round-action .dot,
.screen-round-action .dot {
  background: var(--theme-primary-deep) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(255, 63, 127, 0.16) !important;
}

/* Home black canvas requested in review screenshot. */
#page-home {
  --bg: var(--theme-premium-bg);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 91, 143, 0.14), transparent 30%),
    radial-gradient(circle at 88% 38%, rgba(255, 124, 168, 0.10), transparent 32%),
    linear-gradient(180deg, #050407 0%, #090508 56%, #050407 100%) !important;
  color: var(--theme-premium-text) !important;
}

#page-home .surface-deck {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 91, 143, 0.12), transparent 28%),
    radial-gradient(circle at 92% 28%, rgba(255, 124, 168, 0.10), transparent 34%),
    linear-gradient(180deg, #050407 0%, #090508 48%, #050407 100%) !important;
  box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.32) !important;
}

#page-home .surface-deck::before {
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 91, 143, 0.18), transparent 28%),
    radial-gradient(circle at 68% 66%, rgba(255, 124, 168, 0.12), transparent 46%),
    linear-gradient(135deg, rgba(255, 91, 143, 0.06), rgba(255, 255, 255, 0)) !important;
  opacity: 1 !important;
}

#page-home .surface-deck::after {
  color: rgba(255, 124, 168, 0.26) !important;
  text-shadow: 0 10px 22px rgba(255, 91, 143, 0.16) !important;
}

#page-home .section-title,
#page-home .btn-ghost {
  color: #FF5B8F !important;
  text-shadow: 0 0 18px rgba(255, 91, 143, 0.18) !important;
}

#page-home .quick-strip,
#page-home .card,
#page-home .student-result-mini,
#page-home .student-result-card,
#page-home .blog-mini-card,
#page-home .blog-card,
#page-home .empty-inline-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.16), transparent 30%),
    var(--theme-premium-card) !important;
  border-color: rgba(255, 91, 143, 0.32) !important;
  box-shadow: 0 1px 3px rgba(255, 91, 143, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-premium-text) !important;
}

#page-home .quick-strip .action-item {
  background: rgba(255, 248, 250, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-home .quick-strip .action-label,
#page-home .student-result-title,
#page-home .blog-mini-title,
#page-home .blog-title,
#page-home .empty-inline-card strong {
  color: var(--theme-premium-text) !important;
}

#page-home .student-result-meta,
#page-home .student-result-story,
#page-home .blog-mini-text,
#page-home .blog-excerpt,
#page-home .empty-inline-card {
  color: var(--theme-premium-muted) !important;
}

#page-home .student-tag-row span,
#page-home .student-metric-row span,
#page-home .blog-chip {
  background: rgba(255, 248, 250, 0.08) !important;
  border-color: rgba(255, 91, 143, 0.30) !important;
  color: #FF7CA8 !important;
}

/* Global black canvas: all pages dark, cards lifted with pink glow. */
body,
.phone-frame,
.page,
.home-shell,
.cart-page,
.profile-page,
.notifications-page,
.course-detail-page,
.ai-chat-page,
.ai-combo-page {
  --bg: var(--theme-premium-bg);
  --fg: var(--theme-premium-text);
  --fg-muted: var(--theme-premium-muted);
  --fg-light: rgba(215, 184, 196, 0.70);
  --border: rgba(255, 91, 143, 0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 91, 143, 0.22), transparent 30%),
    radial-gradient(circle at 92% 36%, rgba(255, 124, 168, 0.16), transparent 34%),
    linear-gradient(180deg, #13080E 0%, #1B0A12 48%, #10070C 100%) !important;
  color: var(--theme-premium-text) !important;
}

.surface-deck,
.courses-deck,
.profile-content-deck,
.cart-deck,
.product-category-deck,
.product-results-panel,
.notifications-deck,
.course-study-deck,
.student-results-page,
.orders-shell,
.container {
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 91, 143, 0.18), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(255, 124, 168, 0.13), transparent 34%),
    linear-gradient(180deg, #14080E 0%, #1D0B14 54%, #12080D 100%) !important;
  color: var(--theme-premium-text) !important;
  box-shadow: none !important;
}

.screen-hero,
.home-top,
.home-hero,
.profile-hero,
.cart-top,
.notifications-hero,
.blog-hero,
.student-results-hero,
.course-study-hero,
.ai-chat-header,
.ai-combo-header,
.page-nav,
.orders-sticky-head {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 124, 168, 0.22), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(255, 91, 143, 0.18), transparent 34%),
    var(--theme-premium-card) !important;
  border-color: rgba(255, 91, 143, 0.28) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-premium-text) !important;
}

.page-nav-title,
.page-nav-back,
.screen-title,
.notifications-title,
.home-brand,
.home-hello,
.profile-hero-name,
.ai-chat-header-title,
.ai-combo-hero-title,
.section-title,
.course-list-title,
.product-list-head strong,
.category-section-head strong,
.detail-block-title,
.checkout-title,
.cart-name,
.product-name,
.product-grid-name,
.home-product-title,
.course-card-title,
.course-page-title,
.home-course-title,
.course-overview-title,
.course-next-title,
.blog-title,
.blog-mini-title,
.blog-detail-title,
.student-result-title,
.repurchase-name,
.profile-card-title,
.profile-utility-label,
.profile-support-title,
.profile-support-label,
.voucher-code,
.voucher-row-code,
.order-full-id,
.order-quick-id,
.notif-title,
.payment-choice-title,
.address-choice-title,
.bank-transfer-head strong,
.calendar-title,
.calendar-cta-title,
.return-policy-card strong,
.review-card strong,
.summary-row strong {
  color: var(--theme-premium-text) !important;
}

.home-member-date,
.profile-hero-sub,
.notifications-sub,
.promo-sub,
.support-text,
.product-grid-cat,
.product-card-rating,
.product-detail-desc,
.course-card-meta span,
.course-page-meta,
.course-next-name,
.course-next-meta,
.course-overview-text,
.course-price-stack,
.product-list-head span,
.category-section-head span,
.blog-excerpt,
.blog-mini-text,
.blog-detail-excerpt,
.blog-content,
.student-result-meta,
.student-result-story,
.repurchase-meta,
.voucher-title,
.voucher-row-title,
.voucher-exp,
.order-full-date,
.notif-body,
.notif-time,
.profile-contact-label,
.profile-utility-arrow,
.profile-support-arrow,
.payment-choice-desc,
.address-choice-note,
.bank-transfer-head span,
.payment-note,
.payment-copy-row span,
.checkout-field-label,
.address-hint,
.calendar-subtitle,
.return-policy-card,
.review-comment,
.summary-row span,
.cart-meta,
.menu-arrow {
  color: var(--theme-premium-muted) !important;
}

.card,
.quick-strip,
.promo-hero,
.support-banner,
.profile-referral,
.student-honor-card,
.cart-summary-card,
.cart-items-card,
.cart-voucher-row,
.cart-total-card,
.checkout-section,
.checkout-phone-card,
.bank-transfer-card,
.payment-choice,
.address-choice,
.voucher-choice,
.course-overview-card,
.course-next-card,
.course-page-card,
.course-card,
.home-course-card,
.learning-summary,
.calendar-card,
.calendar-cta,
.return-policy-card,
.alert-banner,
.product-grid-card,
.home-product-card,
.product-row,
.product-info-card,
.review-card,
.blog-mini-card,
.blog-card,
.blog-content,
.blog-related-product,
.student-result-mini,
.student-result-card,
.empty-inline-card,
.voucher-card,
.voucher-row,
.repurchase-card,
.order-quick,
.order-full,
.notif-row,
.profile-card,
.profile-utility,
.profile-contact-row,
.profile-support-card,
.menu-item,
.course-stat,
.ai-chat-preview-hero,
.ai-chat-empty-input,
.ai-chat-msg-bot .ai-chat-msg-bubble,
.ai-chat-inline-combo,
.ai-chat-inline-product,
.ai-chat-inline-pricebox,
.ai-chat-inline-step,
.ai-chat-course-card,
.ai-combo-hero,
.ai-combo-card,
.ai-combo-benefits-section,
.ai-combo-reason,
.ai-combo-routine-section,
.ai-combo-step-card,
.combo-box {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.26), transparent 30%),
    linear-gradient(145deg, rgba(27, 10, 16, 0.98) 0%, rgba(44, 14, 27, 0.98) 54%, rgba(67, 20, 38, 0.96) 100%) !important;
  border-color: rgba(255, 124, 168, 0.44) !important;
  box-shadow:
    0 18px 44px rgba(255, 63, 127, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  color: var(--theme-premium-text) !important;
}

.card::before,
.blog-mini-card::before,
.blog-card::before,
.blog-content::before {
  color: rgba(255, 124, 168, 0.28) !important;
  text-shadow: 0 0 20px rgba(255, 91, 143, 0.24) !important;
}

.card::after,
.blog-mini-card::after,
.blog-card::after,
.blog-content::after,
.empty-inline-card::after {
  color: rgba(255, 124, 168, 0.22) !important;
}

.quick-strip .action-item,
.hero-metric-card,
.member-pill,
.hero-tier,
.profile-sync-pill,
.screen-round-action,
.profile-round-action,
.cart-window-actions,
.cart-window-btn,
.search-pill,
.product-search-box,
.course-status-pill,
.course-type-chip,
.product-category-chip,
.filter-pill,
.tab-bar,
.ai-chat-composer,
.ai-chat-composer-input,
.ai-chat-textarea,
.ai-combo-tag,
.student-tag-row span,
.student-metric-row span,
.blog-chip,
.promo-kicker,
.return-status-chip,
.voucher-row-code,
.badge:not(.badge-free):not(.badge-normal):not(.badge-completed) {
  background: rgba(255, 248, 250, 0.14) !important;
  border-color: rgba(255, 124, 168, 0.40) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(255, 63, 127, 0.12) !important;
  color: #FFABC8 !important;
}

.tab-item,
.tab-label,
.action-label,
.search-pill,
.search-pill input,
.product-search-box input,
.ai-chat-composer-input,
.ai-chat-textarea,
.checkout-input,
.address-box,
.voucher-manual-input {
  color: var(--theme-premium-text) !important;
}

.search-pill span,
.search-pill input::placeholder,
.product-search-box input::placeholder,
.ai-chat-composer-input::placeholder,
.ai-chat-textarea::placeholder,
.checkout-input::placeholder,
.address-box::placeholder,
.voucher-manual-input::placeholder {
  color: rgba(255, 229, 239, 0.78) !important;
}

.product-grid-price,
.home-product-price,
.product-price,
.course-card-price,
.home-course-price,
.course-price-stack strong,
.course-overview-percent,
.cart-total-pink,
.cart-total-row.total strong,
.order-total,
.order-quick-amount,
.voucher-discount,
.voucher-action,
.repurchase-price,
.review-top span,
.student-rating,
.student-result-bottom span,
.summary-row.total span,
.btn-ghost,
.course-list-more,
.cart-remove,
.qty-btn,
.blog-product-link {
  color: #FF7CA8 !important;
}

.product-grid-img,
.home-product-img,
.product-img,
.repurchase-img,
.order-item-img,
.course-card-img,
.course-page-img,
.home-course-img,
.course-study-img,
.blog-card-img,
.blog-mini-img,
.blog-detail-img,
.student-cover-photo,
.ai-chat-course-img,
.ai-chat-inline-product-img,
.ai-combo-img,
.ai-combo-visual,
.ai-combo-step-img {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 124, 168, 0.20), transparent 56%),
    linear-gradient(135deg, #14070D 0%, #2A0D19 100%) !important;
  border-color: rgba(255, 91, 143, 0.28) !important;
}

.divider,
.order-item-row,
.payment-copy-row,
.profile-support-row {
  border-color: rgba(255, 91, 143, 0.20) !important;
}

.tab-item.active svg.tab-icon,
.tab-item.active .tab-label,
.tab-item.active .tab-icon {
  color: #FF5B8F !important;
}

.tab-item.active .tab-indicator,
.course-overview-progress span,
.course-progress-line span,
.cart-check,
.filter-pill.active,
.course-status-pill.active,
.product-category-chip.active {
  background: linear-gradient(90deg, #FF7CA8 0%, #FF3F7F 100%) !important;
}

/* Profile icon alignment: keep every icon attached to its label. */
#page-profile .profile-order-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: start !important;
}

#page-profile .profile-order-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 76px !important;
  padding: 4px 2px 0 !important;
  text-align: center !important;
}

#page-profile .profile-order-step::after {
  display: none !important;
}

#page-profile .profile-order-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  border-radius: 15px !important;
  background:
    rgba(255, 255, 255, 0.96),
    #FFF8FA !important;
  color: #FF3F7F !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#page-profile .profile-order-icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.5 !important;
}

#page-profile .profile-order-label {
  display: block !important;
  width: 100% !important;
  max-width: 58px !important;
  margin: 0 auto !important;
  color: rgba(255, 248, 250, 0.78) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  white-space: normal !important;
}

#page-profile .profile-utility-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#page-profile .profile-utility {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 64px !important;
  padding: 12px !important;
}

#page-profile .profile-utility-icon {
  grid-column: 1 !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 3px !important;
  background:
    rgba(255, 255, 255, 0.88),
    rgba(255, 248, 250, 0.92) !important;
  color: #FF3F7F !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

#page-profile .profile-utility-icon svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  stroke-width: 1.5 !important;
}

#page-profile .profile-utility-label {
  grid-column: 2 !important;
  min-width: 0 !important;
  color: var(--theme-premium-text) !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

#page-profile .profile-utility-arrow {
  grid-column: 3 !important;
  justify-self: end !important;
  color: rgba(255, 248, 250, 0.78) !important;
}

#page-profile .profile-new-badge {
  right: 24px !important;
  top: 10px !important;
  z-index: 1 !important;
}

#page-profile .profile-support-card {
  padding: 0 14px !important;
}

#page-profile .profile-support-title {
  color: var(--theme-premium-text) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 18px rgba(255, 91, 143, 0.18) !important;
}

#page-profile .profile-support-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 0 !important;
  border-top-color: rgba(255, 91, 143, 0.24) !important;
}

#page-profile .profile-support-icon {
  grid-column: 1 !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
  background:
    rgba(255, 255, 255, 0.88),
    rgba(255, 248, 250, 0.92) !important;
  color: #FF3F7F !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

#page-profile .profile-support-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.5 !important;
}

#page-profile .profile-support-label {
  grid-column: 2 !important;
  min-width: 0 !important;
  color: var(--theme-premium-text) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

#page-profile .profile-support-arrow {
  grid-column: 3 !important;
  justify-self: end !important;
  color: rgba(255, 248, 250, 0.78) !important;
}

/* AI chat contrast fixes on the black theme. */
#page-ai-chat .ai-chat-back,
#page-ai-combo .ai-chat-back {
  background: rgba(255, 248, 250, 0.08) !important;
  border-color: rgba(255, 91, 143, 0.34) !important;
  color: #FF7CA8 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-ai-chat .ai-chat-oa-btn,
#page-ai-combo .ai-chat-oa-btn {
  background: rgba(255, 248, 250, 0.92) !important;
  border-color: rgba(255, 91, 143, 0.48) !important;
  color: #FF3F7F !important;
}

#page-ai-chat .ai-chat-msg-user .ai-chat-msg-bubble {
  background: linear-gradient(135deg, #FF5B8F 0%, #FF3F7F 58%, #E7356E 100%) !important;
  border: 1px solid rgba(255, 248, 250, 0.38) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(20, 7, 13, 0.24) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

#page-ai-chat .ai-chat-msg-bot .ai-chat-msg-bubble {
  color: var(--theme-premium-text) !important;
}

#page-ai-chat .ai-chat-course-head,
#page-ai-chat .ai-chat-inline-combo-head {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.98) 0%, rgba(18, 7, 13, 0.98) 100%) !important;
  border-color: rgba(255, 91, 143, 0.34) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-ai-chat .ai-chat-course-head strong,
#page-ai-chat .ai-chat-inline-title,
#page-ai-chat .ai-chat-inline-section-title {
  color: var(--theme-premium-text) !important;
}

#page-ai-chat .ai-chat-course-head span,
#page-ai-chat .ai-chat-inline-subtitle,
#page-ai-chat .ai-chat-inline-note {
  color: var(--theme-premium-muted) !important;
}

#page-ai-chat .ai-chat-composer {
  background: rgba(8, 5, 8, 0.96) !important;
  border-color: rgba(255, 91, 143, 0.38) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-ai-chat .ai-chat-page.ai-chat-result {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#page-ai-chat .ai-chat-scroll {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding-bottom: 14px !important;
}

#page-ai-chat .ai-chat-messages {
  padding-bottom: 6px !important;
}

#page-ai-chat .ai-chat-composer {
  width: calc(100% - 20px) !important;
  box-sizing: border-box !important;
  justify-self: center !important;
}

#page-ai-chat .ai-chat-composer-input {
  color: var(--theme-premium-text) !important;
  background: rgba(255, 248, 250, 0.08) !important;
  border-radius: 0 !important;
}

#page-ai-chat .ai-chat-composer-input::placeholder {
  color: rgba(255, 248, 250, 0.68) !important;
}

/* Make lower profile actions visually match the order shortcuts above. */
#page-profile .profile-content-deck {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 91, 143, 0.14), transparent 30%),
    radial-gradient(circle at 88% 30%, rgba(255, 124, 168, 0.10), transparent 34%),
    linear-gradient(180deg, #050407 0%, #090508 52%, #050407 100%) !important;
}

#page-profile .profile-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.98) 0%, rgba(22, 8, 15, 0.98) 56%, rgba(42, 11, 23, 0.94) 100%) !important;
  border-color: rgba(255, 91, 143, 0.36) !important;
  box-shadow:
    0 18px 44px rgba(255, 63, 127, 0.20),
    0 8px 20px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-profile .profile-card-title,
#page-profile .profile-view-all,
#page-profile .profile-view-all svg {
  color: #FF7CA8 !important;
}

#page-profile .profile-utility {
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 91, 143, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.98), rgba(20, 7, 13, 0.98)) !important;
  border: 1px solid rgba(255, 91, 143, 0.24) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#page-profile .profile-utility-icon,
#page-profile .profile-support-icon {
  border-radius: 15px !important;
  background:
    rgba(255, 255, 255, 0.96),
    #FFF8FA !important;
  color: #FF3F7F !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#page-profile .profile-utility-label,
#page-profile .profile-support-label {
  color: var(--theme-premium-text) !important;
  text-shadow: 0 1px 10px rgba(255, 91, 143, 0.12) !important;
}

#page-profile .profile-utility-arrow,
#page-profile .profile-support-arrow {
  color: #FFB8CD !important;
}

/* Home top contrast: avoid pale text on light/glass cards. */
#page-home .home-top .home-vibe-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.92) 0%, rgba(22, 8, 15, 0.92) 100%) !important;
  border-color: rgba(255, 91, 143, 0.38) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-premium-text) !important;
}

#page-home .home-top .home-vibe-title {
  color: var(--theme-premium-text) !important;
  text-shadow: 0 1px 8px rgba(255, 91, 143, 0.18) !important;
}

#page-home .home-top .home-vibe-sub {
  color: #FFB8CD !important;
  font-weight: 700 !important;
}

#page-home .home-top .home-vibe-icon {
  background:
    rgba(255, 255, 255, 0.96),
    #FFF8FA !important;
  color: #FF3F7F !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#page-home .home-top .search-pill {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.94) 0%, rgba(22, 8, 15, 0.94) 100%) !important;
  border-color: rgba(255, 91, 143, 0.40) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-premium-text) !important;
}

#page-home .home-top .search-pill svg {
  color: #FF7CA8 !important;
}

#page-home .home-top .search-pill span {
  color: var(--theme-premium-text) !important;
  font-weight: 800 !important;
}

#page-home .home-top .promo-hero {
  background:
    linear-gradient(90deg, rgba(5, 4, 7, 0.92) 0%, rgba(22, 7, 13, 0.78) 40%, rgba(22, 7, 13, 0.22) 70%, rgba(22, 7, 13, 0.02) 100%),
    url('../img/a_high_fidelity_mobile_app_banner_for_mewart._on_the_right_side_there_s_a_clear.png') 68% center / cover no-repeat !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.22) !important;
}

#page-home .home-top .promo-title {
  color: var(--theme-premium-text) !important;
  text-shadow: 0 2px 16px rgba(5, 4, 7, 0.52) !important;
}

#page-home .home-top .promo-title b {
  color: #FF7CA8 !important;
}

#page-home .home-top .promo-sub {
  color: #FFEAF2 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 10px rgba(5, 4, 7, 0.42) !important;
}

#page-home .home-top .promo-kicker {
  background: rgba(255, 248, 250, 0.94) !important;
  border-color: rgba(255, 91, 143, 0.36) !important;
  color: #FF3F7F !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12) !important;
}

/* Organic sparkle pass: scattered, irregular drift instead of straight columns. */
@keyframes mewScatterHearts {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(0.96); opacity: 0.32; }
  28% { transform: translate3d(5px, -16px, 0) rotate(10deg) scale(1.08); opacity: 0.68; }
  61% { transform: translate3d(-4px, -34px, 0) rotate(-2deg) scale(0.92); opacity: 0.46; }
}

@keyframes mewScatterStars {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(7deg) scale(0.92); opacity: 0.28; }
  34% { transform: translate3d(-6px, -20px, 0) rotate(-12deg) scale(1.08); opacity: 0.62; }
  72% { transform: translate3d(4px, -42px, 0) rotate(5deg) scale(0.98); opacity: 0.44; }
}

.page::before,
.phone-frame::before {
  content: '♥' !important;
  top: 42px !important;
  bottom: auto !important;
  left: 10px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  white-space: normal !important;
  line-height: 1 !important;
  font-size: 11px !important;
  color: rgba(255, 124, 168, 0.36) !important;
  text-shadow:
    8px 46px 0 rgba(255, 184, 205, 0.20),
    -2px 118px 0 rgba(255, 91, 143, 0.26),
    12px 196px 0 rgba(255, 124, 168, 0.22),
    1px 288px 0 rgba(255, 184, 205, 0.18),
    14px 374px 0 rgba(255, 91, 143, 0.22),
    -1px 468px 0 rgba(255, 124, 168, 0.18),
    10px 570px 0 rgba(255, 184, 205, 0.16) !important;
  animation: mewScatterHearts 10.8s ease-in-out infinite !important;
}

.page::after,
.phone-frame::after {
  content: '✦' !important;
  top: 30px !important;
  bottom: auto !important;
  left: auto !important;
  right: 10px !important;
  width: auto !important;
  height: auto !important;
  white-space: normal !important;
  line-height: 1 !important;
  font-size: 12px !important;
  color: rgba(255, 184, 205, 0.34) !important;
  text-shadow:
    -10px 58px 0 rgba(255, 91, 143, 0.24),
    1px 132px 0 rgba(255, 184, 205, 0.20),
    -14px 224px 0 rgba(255, 124, 168, 0.22),
    -3px 318px 0 rgba(255, 91, 143, 0.18),
    -16px 410px 0 rgba(255, 184, 205, 0.18),
    2px 508px 0 rgba(255, 124, 168, 0.16),
    -12px 610px 0 rgba(255, 91, 143, 0.16) !important;
  animation: mewScatterStars 12.2s ease-in-out infinite !important;
  animation-delay: -3.4s !important;
}

.phone-frame::before {
  left: 12px !important;
  animation-duration: 12.8s !important;
  animation-delay: -1.8s !important;
}

.phone-frame::after {
  right: 12px !important;
  animation-duration: 13.6s !important;
  animation-delay: -5.2s !important;
}

/* Remove the separate rectangle inside the AI composer input. */
#page-ai-chat .ai-chat-composer-input,
#page-ai-chat .ai-chat-composer-input:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Stronger icon capsules in profile actions. */
#page-profile .profile-utility-icon,
#page-profile .profile-support-icon,
#page-profile .profile-order-icon {
  background:
    rgba(255, 255, 255, 0.58),
    linear-gradient(135deg, #FF8CB4 0%, #FF3F7F 58%, #C81D5A 100%) !important;
  color: #FFF8FA !important;
  box-shadow:
    0 0 0 1px rgba(255, 248, 250, 0.18),
    0 12px 26px rgba(255, 63, 127, 0.38),
    0 0 22px rgba(255, 91, 143, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

#page-profile .profile-utility-icon svg,
#page-profile .profile-support-icon svg,
#page-profile .profile-order-icon svg {
  filter: drop-shadow(0 1px 3px rgba(20, 7, 13, 0.28)) !important;
}

/* Page-edge life effects: floating hearts and stars down both sides. */
@keyframes mewEdgeFloatLeft {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 0.34; }
  45% { transform: translate3d(4px, -18px, 0) rotate(7deg); opacity: 0.72; }
  70% { transform: translate3d(-2px, -34px, 0) rotate(-2deg); opacity: 0.48; }
}

@keyframes mewEdgeFloatRight {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(5deg); opacity: 0.30; }
  42% { transform: translate3d(-5px, -22px, 0) rotate(-8deg); opacity: 0.68; }
  72% { transform: translate3d(3px, -40px, 0) rotate(3deg); opacity: 0.46; }
}

.page {
  position: absolute !important;
  isolation: isolate !important;
}

.page::before,
.page::after {
  position: absolute !important;
  top: 22px !important;
  bottom: 96px !important;
  z-index: 2 !important;
  width: 22px !important;
  white-space: pre-line !important;
  pointer-events: none !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 14px !important;
  line-height: 72px !important;
  text-align: center !important;
  color: rgba(255, 124, 168, 0.42) !important;
  text-shadow:
    0 0 12px rgba(255, 91, 143, 0.36),
    0 8px 18px rgba(255, 63, 127, 0.16) !important;
}

.page::before {
  content: '♥\A ✦\A ♡\A ✧\A ♥\A ✦\A ♡\A ✧\A ♥\A ✦\A ♡\A ✧' !important;
  left: 8px !important;
  animation: mewEdgeFloatLeft 7.6s ease-in-out infinite !important;
}

.page::after {
  content: '✦\A ♡\A ✧\A ♥\A ✦\A ♡\A ✧\A ♥\A ✦\A ♡\A ✧\A ♥' !important;
  right: 8px !important;
  animation: mewEdgeFloatRight 8.4s ease-in-out infinite !important;
  animation-delay: -2.2s !important;
}

.page > * {
  position: relative;
  z-index: 1;
}

.phone-frame::before,
.phone-frame::after {
  position: absolute !important;
  top: 34px !important;
  bottom: 88px !important;
  z-index: 42 !important;
  width: 20px !important;
  white-space: pre-line !important;
  pointer-events: none !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 13px !important;
  line-height: 76px !important;
  text-align: center !important;
  color: rgba(255, 184, 205, 0.30) !important;
  text-shadow:
    0 0 14px rgba(255, 91, 143, 0.40),
    0 8px 18px rgba(255, 63, 127, 0.18) !important;
}

.phone-frame::before {
  content: '♡\A ✧\A ♥\A ✦\A ♡\A ✧\A ♥\A ✦\A ♡' !important;
  left: 8px !important;
  animation: mewEdgeFloatLeft 9.2s ease-in-out infinite !important;
  animation-delay: -1.4s !important;
}

.phone-frame::after {
  content: '✦\A ♥\A ✧\A ♡\A ✦\A ♥\A ✧\A ♡\A ✦' !important;
  right: 8px !important;
  animation: mewEdgeFloatRight 9.8s ease-in-out infinite !important;
  animation-delay: -3s !important;
}

#page-ai-chat::before,
#page-ai-chat::after,
#page-ai-combo::before,
#page-ai-combo::after {
  bottom: 18px !important;
  opacity: 0.46 !important;
}

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

/* Final optical center: center the whole text block between image and delete. */
#page-cart .cart-line .flex-1 {
  transform: translateX(11px) !important;
}

#page-cart .cart-line .cart-qty {
  transform: none !important;
}

/* Optical correction: quantity pill reads slightly left in the compact cart grid. */
#page-cart .cart-line .cart-qty {
  transform: translateX(10px) !important;
}

/* Cart final visual correction: quantity pill is narrower and centered under text. */
#page-cart .cart-line {
  grid-template-columns: 24px 76px 116px 38px !important;
  column-gap: 9px !important;
}

#page-cart .cart-line .flex-1 {
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  grid-template-rows: minmax(38px, auto) 16px 32px !important;
  justify-items: center !important;
  text-align: center !important;
}

#page-cart .cart-line .cart-name,
#page-cart .cart-line-price {
  width: 116px !important;
  max-width: 116px !important;
  text-align: center !important;
}

#page-cart .cart-qty {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 32px !important;
  grid-template-columns: 29px 34px 29px !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

#page-cart .cart-qty .qty-btn {
  width: 29px !important;
  height: 32px !important;
  font-size: 17px !important;
  line-height: 32px !important;
}

#page-cart .cart-qty span {
  min-width: 34px !important;
  width: 34px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 13px !important;
}

/* Cart item final layout: balanced text block and distinct delete action. */
#page-cart .cart-line {
  grid-template-columns: 24px 76px 108px 38px !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 9px !important;
  min-height: 132px !important;
  padding: 14px 12px !important;
}

#page-cart .cart-line .flex-1 {
  width: 108px !important;
  max-width: 108px !important;
  min-width: 108px !important;
  min-height: 96px !important;
  display: grid !important;
  grid-template-rows: minmax(38px, auto) 16px 32px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 5px !important;
  padding: 0 !important;
  text-align: center !important;
}

#page-cart .cart-line .cart-name {
  width: 108px !important;
  max-width: 108px !important;
  min-height: 38px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFF8FA !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.18px !important;
  text-align: center !important;
}

#page-cart .cart-line-price {
  width: 108px !important;
  max-width: 108px !important;
  margin: 0 !important;
  color: #FF7CA8 !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 16px !important;
  text-align: center !important;
}

#page-cart .cart-qty {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 32px !important;
  grid-template-columns: 32px 44px 32px !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

#page-cart .cart-qty .qty-btn {
  width: 32px !important;
  height: 32px !important;
  font-size: 17px !important;
}

#page-cart .cart-qty span {
  min-width: 44px !important;
  font-size: 13px !important;
  line-height: 32px !important;
}

#page-cart .cart-line-actions {
  align-self: center !important;
  justify-self: center !important;
  display: flex !important;
  justify-content: center !important;
}

#page-cart .cart-remove {
  width: 38px !important;
  height: 38px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 124, 168, 0.70) !important;
  background:
    rgba(255, 255, 255, 0.22),
    linear-gradient(145deg, rgba(84, 10, 36, 0.98) 0%, rgba(29, 4, 14, 0.98) 62%, rgba(10, 3, 8, 0.96) 100%) !important;
  color: #FFF8FA !important;
  box-shadow:
    0 0 0 3px rgba(255, 63, 127, 0.10),
    0 12px 26px rgba(255, 63, 127, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

#page-cart .cart-remove svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 8px rgba(255, 124, 168, 0.46)) !important;
}

#page-cart .cart-remove:active {
  transform: scale(0.94) !important;
  background: linear-gradient(145deg, #FF4F8A 0%, #7A102F 100%) !important;
}

/* Cart item alignment: keep product title, price and quantity visually centered. */
#page-cart .cart-line {
  display: grid !important;
  grid-template-columns: 24px 78px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 132px !important;
  padding: 14px 12px !important;
}

#page-cart .cart-check,
#page-cart .cart-img,
#page-cart .cart-line-actions {
  align-self: center !important;
}

#page-cart .cart-line .flex-1 {
  align-self: center !important;
  display: grid !important;
  grid-template-rows: auto auto 36px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 4px !important;
  min-height: 96px !important;
  min-width: 0 !important;
  padding-top: 4px !important;
  text-align: center !important;
}

#page-cart .cart-line .cart-name {
  margin: 0 !important;
  color: #FFF8FA !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.15px !important;
  text-align: center !important;
  width: 100% !important;
}

#page-cart .cart-line-price {
  margin: 0 !important;
  color: #FF7CA8 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  width: 100% !important;
}

#page-cart .cart-qty {
  align-self: end !important;
  justify-self: center !important;
  margin: 0 !important;
}

#page-cart .cart-remove {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 124, 168, 0.42) !important;
  background:
    rgba(255, 255, 255, 0.16),
    rgba(255, 248, 250, 0.08) !important;
  color: #FF8CB4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(255, 63, 127, 0.14) !important;
}

/* Final cart override: placed last so older responsive cart rules cannot win. */
#page-cart .cart-summary-visual {
  background:
    radial-gradient(circle at 48% 18%, rgba(255, 124, 168, 0.18), transparent 56%),
    #FFD6E3 !important;
  border: 1px solid rgba(255, 248, 250, 0.66) !important;
}

#page-cart .cart-summary-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
}

#page-cart .cart-line {
  display: grid !important;
  grid-template-columns: 24px 76px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 132px !important;
  padding: 14px 12px !important;
}

#page-cart .cart-line .flex-1 {
  align-self: center !important;
  display: flex !important;
  min-height: 90px !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#page-cart .cart-line .cart-name {
  margin: 0 0 5px !important;
  color: #FFF8FA !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.22 !important;
  opacity: 1 !important;
}

#page-cart .cart-line-price {
  margin: 0 0 9px !important;
  color: #FF7CA8 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  opacity: 1 !important;
}

#page-cart .cart-line-actions {
  align-self: center !important;
  display: flex !important;
  justify-content: center !important;
}

#page-cart .cart-remove {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 124, 168, 0.42) !important;
  background:
    rgba(255, 255, 255, 0.16),
    rgba(255, 248, 250, 0.08) !important;
  color: #FF8CB4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(255, 63, 127, 0.14) !important;
}

#page-cart .cart-remove svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  filter: none !important;
}

#page-cart .cart-qty {
  margin-top: 0 !important;
}

/* Cart readability and image recovery polish. */
#page-cart .cart-summary-card,
#page-cart .cart-items-card,
#page-cart .cart-voucher-row,
#page-cart .cart-total-card {
  border-color: rgba(255, 91, 143, 0.42) !important;
  color: #FFF8FA !important;
}

#page-cart .cart-summary-card .cart-name,
#page-cart .cart-line .cart-name,
#page-cart .cart-voucher-row .cart-name {
  color: #FFF8FA !important;
  font-weight: 950 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.36) !important;
}

#page-cart .cart-line {
  display: grid !important;
  grid-template-columns: 26px 74px minmax(0, 1fr) 36px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 12px !important;
  margin-bottom: 12px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 94% 18%, rgba(255, 91, 143, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.98), rgba(24, 7, 15, 0.96) 56%, rgba(42, 11, 23, 0.92)) !important;
  border: 1px solid rgba(255, 91, 143, 0.34) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-cart .cart-line:last-child {
  margin-bottom: 0 !important;
}

#page-cart .cart-line .flex-1 {
  min-width: 0 !important;
}

#page-cart .cart-line-price,
#page-cart .cart-total-row .cart-discount,
#page-cart .cart-summary-card .cart-meta {
  color: #FF7CA8 !important;
  font-weight: 950 !important;
  opacity: 1 !important;
}

#page-cart .cart-meta,
#page-cart .cart-total-row span {
  color: #FFEAF2 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

#page-cart .cart-total-row strong {
  color: #FFF8FA !important;
  font-weight: 950 !important;
  opacity: 1 !important;
}

#page-cart .cart-total-row.total span,
#page-cart .cart-total-row.total strong {
  color: #FF7CA8 !important;
  text-shadow: 0 0 18px rgba(255, 63, 127, 0.30) !important;
}

#page-cart .cart-summary-visual,
#page-cart .cart-img {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 124, 168, 0.20), transparent 58%),
    #FFF1F6 !important;
  border: 1px solid rgba(255, 248, 250, 0.62) !important;
}

#page-cart .cart-summary-image,
#page-cart .cart-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
}

#page-cart .cart-line-actions {
  align-self: center !important;
  display: flex !important;
  justify-content: flex-end !important;
}

#page-cart .cart-remove {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 124, 168, 0.42) !important;
  background:
    rgba(255, 255, 255, 0.18),
    rgba(255, 248, 250, 0.08) !important;
  color: #FF8CB4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(255, 63, 127, 0.14) !important;
}

#page-cart .cart-remove:active {
  transform: scale(0.96) !important;
  background: rgba(255, 91, 143, 0.16) !important;
}

#page-cart .cart-remove svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5 !important;
  filter: none !important;
}

#page-cart .cart-check {
  border-color: rgba(255, 248, 250, 0.48) !important;
}

#page-home .home-top .promo-hero {
  background:
    linear-gradient(90deg, rgba(5, 4, 7, 0.94) 0%, rgba(22, 7, 13, 0.82) 39%, rgba(22, 7, 13, 0.24) 68%, rgba(22, 7, 13, 0.04) 100%),
    url('../img/a_high_fidelity_mobile_app_banner_for_mewart._on_the_right_side_there_s_a_clear.png') 68% center / cover no-repeat !important;
}

#page-home .promo-visual .hero-cosmetics-image {
  display: block !important;
  opacity: 1 !important;
  filter: drop-shadow(0 16px 22px rgba(255, 63, 127, 0.24)) !important;
}

/* Keep motion off icon containers: sparkles stay behind page content only. */
.phone-frame::before,
.phone-frame::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.page::before,
.page::after {
  z-index: 0 !important;
}

.page > * {
  position: relative !important;
  z-index: 1 !important;
}

#page-profile .profile-card::before,
#page-profile .profile-card::after,
#page-profile .profile-content-deck::before,
#page-profile .profile-content-deck::after,
#page-profile .profile-utility::before,
#page-profile .profile-utility::after,
#page-profile .profile-support-row::before,
#page-profile .profile-support-row::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#page-profile .profile-order-icon,
#page-profile .profile-utility-icon,
#page-profile .profile-support-icon,
#page-profile .profile-order-icon svg,
#page-profile .profile-utility-icon svg,
#page-profile .profile-support-icon svg {
  animation: none !important;
  transform: none !important;
}

/* Final profile match: utility/support icons mirror the bright order icons. */
#page-profile .profile-utility {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

#page-profile .profile-support-row {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

#page-profile .profile-utility-icon,
#page-profile .profile-support-icon,
#page-profile .profile-order-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 15px !important;
  background:
    rgba(255, 255, 255, 0.72),
    linear-gradient(135deg, #FF8CB4 0%, #FF4F8A 42%, #FF2F78 100%) !important;
  color: #FFF8FA !important;
  box-shadow:
    0 0 0 1px rgba(255, 248, 250, 0.22),
    0 10px 24px rgba(255, 63, 127, 0.42),
    0 0 22px rgba(255, 91, 143, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -8px 16px rgba(123, 8, 45, 0.20) !important;
}

#page-profile .profile-utility-icon svg,
#page-profile .profile-support-icon svg,
#page-profile .profile-order-icon svg {
  width: 23px !important;
  height: 23px !important;
  color: #FFF8FA !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 1px 3px rgba(20, 7, 13, 0.30)) !important;
}

.student-result-photo.image-clickable,
.student-gallery-thumb.image-clickable {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.student-result-photo.image-clickable:active,
.student-gallery-thumb.image-clickable:active {
  transform: scale(0.985) !important;
}

.student-gallery-thumb.image-clickable {
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.student-image-viewer {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 360;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 4, 7, 0.86);
  backdrop-filter: blur(12px);
}

.student-image-viewer.show {
  display: flex;
}

.student-image-frame {
  width: 100%;
  max-height: 82%;
  display: grid;
  gap: 10px;
  align-content: center;
}

.student-image-frame img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 16px;
  background: #050407;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.24), 0 0 0 1px rgba(255, 91, 143, 0.26);
}

.student-image-caption {
  justify-self: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 248, 250, 0.10);
  border: 1px solid rgba(255, 91, 143, 0.28);
  color: var(--theme-premium-text);
  font-size: 12px;
  font-weight: 900;
}

.student-image-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 91, 143, 0.32);
  border-radius: 50%;
  background: rgba(255, 248, 250, 0.12);
  color: #FFFFFF;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

/* My courses page: dark cards with readable course/schedule text. */
#page-mycourses .calendar-cta,
#page-mycourses .schedule-list-item,
#page-mycourses .enrolled-course-compact,
#page-schedule .calendar-card,
#page-schedule .schedule-list-item {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.98) 0%, rgba(22, 8, 15, 0.98) 56%, rgba(42, 11, 23, 0.94) 100%) !important;
  border: 1px solid rgba(255, 91, 143, 0.34) !important;
  box-shadow:
    0 16px 38px rgba(255, 63, 127, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-premium-text) !important;
}

#page-mycourses .calendar-cta-title,
#page-mycourses .schedule-info-title,
#page-mycourses .enrolled-name,
#page-mycourses .enrolled-name.compact,
#page-schedule .calendar-title,
#page-schedule .schedule-info-title {
  color: var(--theme-premium-text) !important;
  text-shadow: 0 1px 10px rgba(255, 91, 143, 0.14) !important;
}

#page-mycourses .calendar-cta-text,
#page-mycourses .schedule-info-time,
#page-mycourses .enrolled-teacher,
#page-mycourses .enrolled-footer.compact,
#page-schedule .calendar-subtitle,
#page-schedule .schedule-info-time {
  color: var(--theme-premium-muted) !important;
}

#page-mycourses .schedule-info-loc,
#page-mycourses .enrolled-mini-line,
#page-mycourses .enrolled-mini-line svg,
#page-schedule .schedule-info-loc {
  color: #FF7CA8 !important;
  font-weight: 850 !important;
}

#page-mycourses .calendar-cta-icon,
#page-mycourses .enrolled-img,
#page-schedule .calendar-nav,
#page-schedule .schedule-date-box {
  background:
    rgba(255, 255, 255, 0.72),
    linear-gradient(135deg, #FF8CB4 0%, #FF4F8A 42%, #FF2F78 100%) !important;
  color: #FFF8FA !important;
  box-shadow:
    0 0 0 1px rgba(255, 248, 250, 0.18),
    0 10px 24px rgba(255, 63, 127, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
}

#page-mycourses .calendar-cta-icon svg,
#page-mycourses .enrolled-img svg,
#page-schedule .calendar-nav svg {
  color: #FFF8FA !important;
  stroke: currentColor !important;
}

#page-mycourses .schedule-date-box {
  background: rgba(255, 248, 250, 0.08) !important;
  border: 1px solid rgba(255, 91, 143, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(255, 63, 127, 0.12) !important;
}

#page-mycourses .schedule-date-day,
#page-mycourses .schedule-date-month,
#page-schedule .schedule-date-day,
#page-schedule .schedule-date-month {
  color: #FF7CA8 !important;
}

#page-mycourses .badge,
#page-schedule .badge {
  background: rgba(255, 248, 250, 0.10) !important;
  border-color: rgba(255, 91, 143, 0.30) !important;
  color: #FF7CA8 !important;
}

.course-result-submit-btn {
  width: 100% !important;
  min-height: 38px !important;
  margin-top: 10px !important;
  border: 1px solid rgba(255, 209, 91, 0.46) !important;
  border-radius: 999px !important;
  color: #5f2600 !important;
  background: #fff6be !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 1px 3px rgba(255, 164, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

.course-result-submit-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.5 !important;
}

.student-submit-result .form-help {
  margin-top: 6px !important;
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

#page-mycourses .enrolled-progress {
  background: rgba(255, 248, 250, 0.10) !important;
}

#page-mycourses .enrolled-progress-fill {
  background: linear-gradient(90deg, #FF7CA8 0%, #FF3F7F 68%, #FFD6E3 100%) !important;
}

#page-mycourses .course-type-chip {
  background: rgba(255, 248, 250, 0.08) !important;
  border-color: rgba(255, 91, 143, 0.30) !important;
  color: #FF7CA8 !important;
}

/* Schedule calendar polish: premium dark month view. */
#page-schedule .calendar-card {
  padding: 16px 14px 14px !important;
  background:
    radial-gradient(circle at 50% -6%, rgba(255, 91, 143, 0.22), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(255, 124, 168, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.98) 0%, rgba(24, 7, 14, 0.98) 55%, rgba(48, 10, 25, 0.94) 100%) !important;
  border-color: rgba(255, 91, 143, 0.38) !important;
  box-shadow:
    0 20px 50px rgba(255, 63, 127, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-schedule .calendar-head {
  margin-bottom: 14px !important;
}

#page-schedule .calendar-title {
  color: var(--theme-premium-text) !important;
  font-size: 21px !important;
  text-shadow: 0 0 18px rgba(255, 91, 143, 0.18) !important;
}

#page-schedule .calendar-subtitle {
  color: #FFB8CD !important;
  font-weight: 800 !important;
}

#page-schedule .calendar-nav {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 248, 250, 0.22) !important;
  background:
    rgba(255, 255, 255, 0.62),
    linear-gradient(135deg, #FF8CB4 0%, #FF4F8A 42%, #FF2F78 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 10px 24px rgba(255, 63, 127, 0.40),
    0 0 20px rgba(255, 91, 143, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

#page-schedule .calendar-weekday {
  color: #FFB8CD !important;
  font-size: 10.5px !important;
  letter-spacing: 0.02em !important;
}

#page-schedule .calendar-grid {
  gap: 6px !important;
}

#page-schedule .calendar-day {
  min-height: 68px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 91, 143, 0.08), transparent 32%),
    rgba(255, 248, 250, 0.075) !important;
  border: 1px solid rgba(255, 91, 143, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#page-schedule .calendar-day.empty {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#page-schedule .calendar-day.has-event {
  background:
    rgba(255, 248, 250, 0.50),
    #FFF1F7 !important;
  border-color: rgba(255, 248, 250, 0.52) !important;
  box-shadow:
    0 10px 24px rgba(255, 63, 127, 0.32),
    0 0 24px rgba(255, 91, 143, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#page-schedule .calendar-day-number {
  color: #FF7CA8 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#page-schedule .calendar-day.has-event .calendar-day-number {
  color: #FF3F7F !important;
}

#page-schedule .calendar-event {
  background: linear-gradient(135deg, rgba(116, 15, 52, 0.90), rgba(255, 63, 127, 0.88)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.28) !important;
  font-weight: 900 !important;
}

#page-schedule .calendar-event strong {
  color: #FFFFFF !important;
}

#page-schedule .calendar-more {
  color: #FF3F7F !important;
  font-weight: 900 !important;
}

#page-schedule .schedule-list-item {
  min-height: 88px !important;
  padding: 14px 12px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.98) 0%, rgba(28, 8, 16, 0.98) 56%, rgba(54, 12, 28, 0.94) 100%) !important;
  border-color: rgba(255, 91, 143, 0.40) !important;
  box-shadow:
    0 18px 42px rgba(255, 63, 127, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-schedule .schedule-date-box {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background:
    rgba(255, 255, 255, 0.68),
    linear-gradient(135deg, #FF8CB4 0%, #FF4F8A 42%, #FF2F78 100%) !important;
  color: #FFFFFF !important;
}

#page-schedule .schedule-date-day,
#page-schedule .schedule-date-month {
  color: #FFFFFF !important;
}

#page-schedule .schedule-info-title {
  color: var(--theme-premium-text) !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1.32 !important;
}

#page-schedule .schedule-info-time {
  color: #FFD6E3 !important;
  font-weight: 800 !important;
}

#page-schedule .schedule-info-loc {
  color: #FF7CA8 !important;
  font-weight: 900 !important;
}

/* Checkout inputs and cart controls: high contrast + premium buttons. */
#page-checkout .voucher-code-entry input,
#page-checkout .checkout-input-wrap,
#page-checkout .address-box {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 91, 143, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(8, 5, 8, 0.96), rgba(22, 8, 15, 0.96)) !important;
  border: 1px solid rgba(255, 91, 143, 0.42) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-premium-text) !important;
}

#page-checkout .voucher-code-entry input,
#page-checkout .checkout-input,
#page-checkout .address-box {
  color: var(--theme-premium-text) !important;
  caret-color: #FF7CA8 !important;
  -webkit-text-fill-color: var(--theme-premium-text) !important;
  opacity: 1 !important;
}

#page-checkout .voucher-code-entry input::placeholder,
#page-checkout .checkout-input::placeholder,
#page-checkout .address-box::placeholder {
  color: #FFB8CD !important;
  -webkit-text-fill-color: #FFB8CD !important;
  opacity: 1 !important;
}

#page-checkout .checkout-input-wrap svg,
#page-checkout .voucher-code-entry + .voucher-applied-note strong {
  color: #FF7CA8 !important;
}

#page-checkout .checkout-field-label,
#page-checkout .address-hint,
#page-checkout .voucher-applied-note {
  color: #FFD6E3 !important;
}

#page-checkout .voucher-code-entry button,
#page-checkout .voucher-applied-note button {
  background: linear-gradient(135deg, #FF7CA8 0%, #FF3F7F 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

#page-cart .cart-remove {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 248, 250, 0.22) !important;
  background:
    rgba(255, 255, 255, 0.62),
    linear-gradient(135deg, #FF8CB4 0%, #FF4F8A 44%, #FF2F78 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

#page-cart .cart-remove svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 1px 3px rgba(20, 7, 13, 0.28)) !important;
}

#page-cart .cart-qty {
  width: auto !important;
  min-width: 124px !important;
  height: 36px !important;
  display: inline-grid !important;
  grid-template-columns: 36px minmax(40px, 1fr) 36px !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 91, 143, 0.38) !important;
  background: rgba(255, 248, 250, 0.08) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#page-cart .cart-qty .qty-btn {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #FFF8FA !important;
  color: #FF3F7F !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#page-cart .cart-qty span {
  min-width: 40px !important;
  color: var(--theme-premium-text) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

#page-cart .cart-voucher-row .voucher-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #FFF8FA !important;
  color: #FF3F7F !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

#page-cart .cart-voucher-row .menu-arrow {
  color: #FFB8CD !important;
}

#page-cart .cart-check {
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

#page-profile .profile-utility:hover .profile-utility-icon,
#page-profile .profile-support-row:hover .profile-support-icon,
#page-profile .profile-order-step:hover .profile-order-icon {
  box-shadow:
    0 0 0 1px rgba(255, 248, 250, 0.24),
    0 12px 28px rgba(255, 63, 127, 0.48),
    0 0 28px rgba(255, 91, 143, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -8px 16px rgba(123, 8, 45, 0.20) !important;
}

/* Final edge override: scattered placement wins over the older column layout above. */
.page::before,
.phone-frame::before {
  content: '♥' !important;
  top: 42px !important;
  bottom: auto !important;
  left: 10px !important;
  right: auto !important;
  width: auto !important;
  white-space: normal !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: rgba(255, 124, 168, 0.36) !important;
  text-shadow:
    8px 46px 0 rgba(255, 184, 205, 0.20),
    -2px 118px 0 rgba(255, 91, 143, 0.26),
    12px 196px 0 rgba(255, 124, 168, 0.22),
    1px 288px 0 rgba(255, 184, 205, 0.18),
    14px 374px 0 rgba(255, 91, 143, 0.22),
    -1px 468px 0 rgba(255, 124, 168, 0.18),
    10px 570px 0 rgba(255, 184, 205, 0.16) !important;
  animation: mewScatterHearts 10.8s ease-in-out infinite !important;
}

.page::after,
.phone-frame::after {
  content: '✦' !important;
  top: 30px !important;
  bottom: auto !important;
  left: auto !important;
  right: 10px !important;
  width: auto !important;
  white-space: normal !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: rgba(255, 184, 205, 0.34) !important;
  text-shadow:
    -10px 58px 0 rgba(255, 91, 143, 0.24),
    1px 132px 0 rgba(255, 184, 205, 0.20),
    -14px 224px 0 rgba(255, 124, 168, 0.22),
    -3px 318px 0 rgba(255, 91, 143, 0.18),
    -16px 410px 0 rgba(255, 184, 205, 0.18),
    2px 508px 0 rgba(255, 124, 168, 0.16),
    -12px 610px 0 rgba(255, 91, 143, 0.16) !important;
  animation: mewScatterStars 12.2s ease-in-out infinite !important;
  animation-delay: -3.4s !important;
}

.phone-frame::before {
  left: 12px !important;
  animation-duration: 12.8s !important;
  animation-delay: -1.8s !important;
}

.phone-frame::after {
  right: 12px !important;
  animation-duration: 13.6s !important;
  animation-delay: -5.2s !important;
}

/* Home quick browsing: swipe through featured courses/products. */
#page-home .home-feature-grid,
#page-home .home-product-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  margin: 0 -16px 18px !important;
  padding: 0 16px 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  overscroll-behavior-x: contain !important;
}

#page-home .home-feature-grid::-webkit-scrollbar,
#page-home .home-product-grid::-webkit-scrollbar {
  display: none !important;
}

#page-home .home-course-card {
  flex: 0 0 46% !important;
  min-width: 152px !important;
  max-width: 174px !important;
  scroll-snap-align: start !important;
}

#page-home .home-product-card {
  flex: 0 0 74% !important;
  min-width: 252px !important;
  max-width: 286px !important;
  grid-template-columns: 82px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 112px !important;
  padding: 11px 12px !important;
  position: relative !important;
  scroll-snap-align: start !important;
  background:
    radial-gradient(circle at 95% 10%, rgba(255, 105, 174, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(36, 8, 25, 0.96), rgba(75, 18, 48, 0.94)) !important;
  border: 1px solid rgba(255, 100, 170, 0.42) !important;
}

#page-home .home-product-img {
  width: 82px !important;
  height: 82px !important;
  border-radius: 16px !important;
}

#page-home .home-product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #fff8fb !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
}

#page-home .home-product-price {
  padding-right: 0 !important;
  color: #ff73ad !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

#page-home .home-product-card .round-add,
#page-home .home-product-card .round-add.outline {
  position: static !important;
  justify-self: end !important;
  align-self: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: linear-gradient(135deg, #ff4f9e 0%, #d91470 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(242, 71, 143, 0.42), 0 0 0 3px rgba(255, 127, 190, 0.20) !important;
  opacity: 1 !important;
}

#page-home .home-product-card .round-add svg,
#page-home .home-product-card .round-add.outline svg {
  width: 22px !important;
  height: 22px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 1.5 !important;
  opacity: 1 !important;
}

@media (max-width: 360px) {
  #page-home .home-product-card {
    flex-basis: 82% !important;
    min-width: 236px !important;
    grid-template-columns: 76px minmax(0, 1fr) 40px !important;
  }

  #page-home .home-product-img {
    width: 76px !important;
    height: 76px !important;
  }
}

/* Checkout product cards: keep text readable on the dark checkout page. */
#page-checkout .checkout-items-list {
  display: grid !important;
  gap: 10px !important;
}

#page-checkout .checkout-item-line {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 112px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(255, 91, 143, 0.16), transparent 36%),
    rgba(255, 248, 250, 0.98) !important;
  border: 1px solid rgba(255, 184, 205, 0.76) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  color: #2A1320 !important;
}

#page-checkout .checkout-item-img {
  width: 92px !important;
  height: 92px !important;
  border-radius: 16px !important;
  background: #FFF1F6 !important;
  border: 1px solid rgba(255, 184, 205, 0.62) !important;
  justify-self: center !important;
}

#page-checkout .checkout-item-info {
  min-width: 0 !important;
}

#page-checkout .checkout-item-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
}

#page-checkout .checkout-item-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: #2A1320 !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1.24 !important;
  text-shadow: none !important;
}

#page-checkout .checkout-item-meta {
  margin-top: 7px !important;
  color: #765466 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}

#page-checkout .checkout-item-price {
  color: #FF3F7F !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

/* Checkout address preview: make the saved address readable on dark glass cards. */
#page-checkout .checkout-section {
  overflow: visible !important;
  padding-top: 18px !important;
  margin-bottom: 14px !important;
}

#page-checkout .checkout-section + .checkout-section {
  margin-top: 14px !important;
}

#page-checkout .address-preview {
  position: relative !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #fff8fb !important;
  border: 1px solid rgba(255, 116, 174, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 22px rgba(255, 91, 143, 0.12) !important;
  color: #321424 !important;
  opacity: 1 !important;
}

#page-checkout .checkout-title {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  min-height: 24px !important;
  line-height: 1.35 !important;
  color: #fff8fb !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28) !important;
}

#page-checkout .checkout-title svg {
  flex-shrink: 0 !important;
  color: #fff8fb !important;
  stroke: #fff8fb !important;
}

#page-checkout .address-preview span {
  color: #321424 !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#page-checkout .address-preview svg {
  width: 19px !important;
  height: 19px !important;
  color: #ff3f8d !important;
  stroke: #ff3f8d !important;
  stroke-width: 1.5 !important;
  margin-top: 1px !important;
  flex-shrink: 0 !important;
}

/* Cart item controls: align checkbox, image and delete button on one row. */
#page-cart .cart-items-card .cart-line {
  display: grid !important;
  grid-template-columns: 32px 78px minmax(0, 1fr) 42px !important;
  grid-template-areas: "check image info remove" !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
}

#page-cart .cart-items-card .cart-check {
  grid-area: check !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page-cart .cart-items-card .cart-img {
  grid-area: image !important;
  justify-self: center !important;
  align-self: center !important;
  width: 78px !important;
  height: 78px !important;
}

#page-cart .cart-items-card .cart-line .flex-1 {
  grid-area: info !important;
  align-self: center !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#page-cart .cart-items-card .cart-line .cart-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

#page-cart .cart-items-card .cart-line-actions {
  grid-area: remove !important;
  justify-self: center !important;
  align-self: center !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

#page-cart .cart-items-card .cart-remove {
  margin: 0 !important;
}

#page-cart .cart-items-card .cart-qty {
  min-width: 112px !important;
  height: 34px !important;
  grid-template-columns: 34px minmax(38px, 1fr) 34px !important;
  margin-top: 2px !important;
}

#page-cart .cart-items-card .cart-qty .qty-btn {
  width: 34px !important;
  height: 34px !important;
}

/* Checkout bank transfer: keep account details readable on the dark checkout theme. */
#page-checkout .bank-transfer-card {
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #fff8fb !important;
  border: 1px solid rgba(255, 124, 168, 0.58) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  color: #2a1320 !important;
}

#page-checkout .bank-transfer-card .bank-transfer-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#page-checkout .bank-transfer-card .bank-transfer-head > div {
  min-width: 0 !important;
}

#page-checkout .bank-transfer-head strong {
  color: #2a1320 !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
}

#page-checkout .bank-transfer-head span,
#page-checkout .payment-note {
  color: #6b3a57 !important;
  font-weight: 650 !important;
  opacity: 1 !important;
}

#page-checkout .payment-copy-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(90, 20, 59, 0.14) !important;
}

#page-checkout .payment-copy-row > div {
  min-width: 0 !important;
}

#page-checkout .payment-copy-row span {
  color: #7a405f !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

#page-checkout .payment-copy-row strong {
  color: #2a1320 !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  overflow-wrap: anywhere !important;
}

#page-checkout .bank-transfer-card .copy-mini {
  max-width: 118px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 91, 143, 0.42) !important;
  color: #e63586 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.14) !important;
  white-space: normal !important;
}

#page-checkout .bank-transfer-card .vietqr-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px dashed rgba(255, 91, 143, 0.32) !important;
  overflow: hidden !important;
}

#page-checkout .bank-transfer-card .vietqr-frame {
  position: relative !important;
  width: min(220px, 100%) !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: #fff !important;
  overflow: hidden !important;
}

#page-checkout .bank-transfer-card .vietqr-frame::before {
  content: 'Đang tải QR...' !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  color: #8a4766 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 124, 168, 0.14), transparent 38%),
    #fff !important;
  z-index: 0 !important;
}

#page-checkout .bank-transfer-card .vietqr-frame-loaded::before {
  content: none !important;
  display: none !important;
}

#page-checkout .bank-transfer-card .vietqr-img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

#page-checkout .bank-transfer-card .vietqr-frame-error .vietqr-img {
  display: none !important;
}

#page-checkout .bank-transfer-card .vietqr-frame-error::before {
  content: 'QR chưa tải được. Vui lòng copy thông tin bên dưới.' !important;
  position: static !important;
  inset: auto !important;
  display: block !important;
  max-width: 160px !important;
  color: #7a405f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

#page-checkout .bank-transfer-card .vietqr-caption {
  display: grid !important;
  gap: 2px !important;
  text-align: center !important;
}

#page-checkout .bank-transfer-card .vietqr-caption strong {
  color: #2a1320 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#page-checkout .bank-transfer-card .vietqr-caption span {
  color: #6b3a57 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#page-notifications.notifications-page,
#page-notifications .notifications-page {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 91, 143, 0.22), transparent 30%),
    radial-gradient(circle at 92% 34%, rgba(255, 124, 168, 0.12), transparent 34%),
    linear-gradient(180deg, #12040d 0%, #060206 58%, #020103 100%) !important;
}

#page-notifications .notifications-hero {
  padding: 22px 16px 18px !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 91, 143, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(42, 8, 24, 0.94), rgba(12, 3, 9, 0.82)) !important;
  border-bottom: 1px solid rgba(255, 127, 184, 0.18) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24) !important;
}

#page-notifications .notifications-hero .page-nav {
  margin: 0 -4px 10px !important;
  padding: 10px 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff7fb !important;
}

#page-notifications .notifications-hero .page-nav-title,
#page-notifications .notifications-hero .page-nav-back {
  color: #fff7fb !important;
  opacity: 1 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.24) !important;
}

#page-notifications .notifications-title {
  color: #fff7fb !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
  line-height: 1.05 !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important;
}

#page-notifications .notifications-sub {
  color: rgba(255, 224, 238, 0.92) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

#page-notifications .notifications-deck {
  margin-top: 0 !important;
  padding: 14px 14px 112px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-notifications .notif-row {
  position: relative !important;
  grid-template-columns: 46px minmax(0, 1fr) 12px !important;
  gap: 12px !important;
  align-items: start !important;
  min-height: 104px !important;
  margin-bottom: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 91, 143, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(33, 8, 21, 0.98), rgba(12, 3, 9, 0.98) 62%, rgba(23, 5, 15, 0.98)) !important;
  border: 1px solid rgba(255, 126, 178, 0.30) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 8px 24px rgba(255, 63, 127, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #fff7fb !important;
}

#page-notifications .notif-row.unread {
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 91, 143, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(50, 10, 31, 0.99), rgba(15, 3, 10, 0.99) 58%, rgba(30, 6, 19, 0.99)) !important;
  border-color: rgba(255, 126, 178, 0.48) !important;
}

#page-notifications .notif-row:active {
  transform: scale(0.985) !important;
}

#page-notifications .notif-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 17px !important;
  background:
    rgba(255, 255, 255, 0.72),
    linear-gradient(135deg, #ff9bc3 0%, #ff4f9e 48%, #e91e7b 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 26px rgba(255, 63, 127, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

#page-notifications .notif-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: #fff !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 1px 3px rgba(30, 4, 16, 0.26)) !important;
}

#page-notifications .notif-title {
  color: #fff8fb !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1.32 !important;
  margin-bottom: 5px !important;
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.20) !important;
}

#page-notifications .notif-body {
  color: rgba(255, 221, 236, 0.88) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.48 !important;
  margin: 0 0 8px !important;
  opacity: 1 !important;
}

#page-notifications .notif-time {
  color: #ff9cc6 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  opacity: 1 !important;
}

#page-notifications .notif-dot {
  width: 10px !important;
  height: 10px !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 174, 209, 0.36) !important;
  box-shadow: none !important;
}

#page-notifications .notif-dot.unread {
  background: #ff5aa3 !important;
  box-shadow: 0 0 0 5px rgba(255, 90, 163, 0.14), 0 0 18px rgba(255, 90, 163, 0.55) !important;
}

/* Final icon polish: softer capsules, cleaner strokes, no heavy glow. */
.screen-round-action,
.profile-round-action,
.action-icon,
.profile-contact-icon,
.profile-order-icon,
.profile-utility-icon,
.profile-support-icon,
.course-overview-icon,
.course-next-icon,
.order-quick-icon,
.menu-icon,
.cart-summary-icon,
.cart-voucher-icon,
.payment-choice-icon,
.category-chip-icon,
.calendar-cta-icon,
.my-course-mini-icon,
.support-icon,
.notif-icon {
  background:
    rgba(255, 255, 255, 0.42),
    rgba(255, 244, 250, 0.96) !important;
  border: 1px solid rgba(255, 143, 191, 0.30) !important;
  color: #e73589 !important;
  box-shadow:
    0 7px 16px rgba(70, 13, 40, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  filter: none !important;
}

.screen-round-action svg,
.profile-round-action svg,
.action-icon svg,
.profile-contact-icon svg,
.profile-order-icon svg,
.profile-utility-icon svg,
.profile-support-icon svg,
.course-overview-icon svg,
.course-next-icon svg,
.order-quick-icon svg,
.menu-icon svg,
.cart-summary-icon svg,
.cart-voucher-icon svg,
.payment-choice-icon svg,
.category-chip-icon svg,
.calendar-cta-icon svg,
.my-course-mini-icon svg,
.support-icon svg,
.notif-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  filter: none !important;
}

#page-checkout .payment-choice-icon {
  background:
    #ffffff,
    #ffffff !important;
  border: 1.5px solid rgba(255, 151, 195, 0.88) !important;
  color: #f0187a !important;
  box-shadow:
    0 0 0 3px rgba(255, 238, 247, 0.95),
    0 10px 24px rgba(255, 63, 127, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  opacity: 1 !important;
}

#page-checkout .payment-choice.active .payment-choice-icon {
  background:
    #ffffff,
    #ffffff !important;
  border-color: rgba(255, 80, 150, 0.95) !important;
  color: #ff006f !important;
  box-shadow:
    0 0 0 4px rgba(255, 235, 245, 0.98),
    0 12px 28px rgba(255, 63, 127, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

#page-checkout .payment-choice-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75)) !important;
}

#page-checkout .payment-choice.disabled {
  opacity: 1 !important;
}

#page-checkout .payment-choice.disabled .payment-choice-title,
#page-checkout .payment-choice.disabled .payment-choice-desc {
  opacity: 0.58 !important;
}

.screen-round-action:active,
.profile-round-action:active,
.action-item:active .action-icon,
.profile-utility:active .profile-utility-icon,
.profile-support-row:active .profile-support-icon,
.profile-order-step:active .profile-order-icon,
.notif-row:active .notif-icon {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 1px 3px rgba(70, 13, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.round-add,
.product-select-btn {
  background:
    rgba(255, 255, 255, 0.38),
    linear-gradient(145deg, #ff73ad 0%, #ee3b8d 100%) !important;
  border: 1px solid rgba(255, 200, 226, 0.54) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(238, 59, 141, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  filter: none !important;
}

.round-add.outline,
#page-home .home-product-card .round-add.outline,
.product-select-btn {
  background:
    rgba(255, 255, 255, 0.72),
    rgba(255, 249, 252, 0.98) !important;
  color: #e73589 !important;
  border: 1px solid rgba(255, 143, 191, 0.42) !important;
  box-shadow: 0 1px 3px rgba(70, 13, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.round-add svg,
.product-select-btn svg,
#page-home .home-product-card .round-add svg,
#page-home .home-product-card .round-add.outline svg {
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  filter: none !important;
}

#page-notifications .notif-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  background:
    rgba(255, 255, 255, 0.32),
    rgba(255, 243, 249, 0.12) !important;
  border: 1px solid rgba(255, 143, 191, 0.30) !important;
  color: #ff9ac6 !important;
  box-shadow:
    0 7px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

#page-notifications .notif-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.5 !important;
  color: #ff9ac6 !important;
}

#page-notifications .notif-row.unread .notif-icon {
  color: #ff7fb8 !important;
  border-color: rgba(255, 126, 178, 0.44) !important;
  background:
    rgba(255, 255, 255, 0.34),
    linear-gradient(145deg, rgba(255, 115, 173, 0.18), rgba(255, 126, 178, 0.11)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#page-profile .profile-utility-icon,
#page-profile .profile-support-icon,
#page-profile .profile-order-icon {
  background:
    rgba(255, 255, 255, 0.44),
    rgba(255, 245, 250, 0.98) !important;
  color: #e73589 !important;
  box-shadow: 0 1px 3px rgba(70, 13, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

#page-profile .profile-utility-icon svg,
#page-profile .profile-support-icon svg,
#page-profile .profile-order-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

/* Four-action sheets need single-line labels on narrow Mini App screens. */
.modal-overlay.modal-compact-actions .modal-content {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.modal-overlay.modal-compact-actions .modal-btns {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.modal-overlay.modal-compact-actions .modal-btns .btn {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
}

/* Order/payment polish: clearer hierarchy on the dark customer account screens. */
.modal-overlay.modal-payment-sheet .modal-content {
  max-height: 88% !important;
  padding: 14px 14px 22px !important;
  border-radius: 30px 30px 0 0 !important;
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 126, 178, 0.28), transparent 34%),
    #fff9fc !important;
}

.modal-overlay.modal-payment-sheet .modal-title {
  margin-bottom: 8px !important;
  color: #2a1320 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
}

.modal-overlay .bank-transfer-card,
.bank-transfer-modal-card {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 126, 178, 0.34) !important;
  box-shadow: 0 1px 3px rgba(90, 20, 59, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  color: #2a1320 !important;
}

.modal-overlay .bank-transfer-card {
  display: flex !important;
  flex-direction: column !important;
}

.modal-overlay .bank-transfer-card .vietqr-box {
  order: 0 !important;
}

.modal-overlay .bank-transfer-card .bank-transfer-head {
  order: 1 !important;
}

.modal-overlay .bank-transfer-card .payment-copy-stack,
.modal-overlay .bank-transfer-card .vietqr-box + div:not(.bank-transfer-head) {
  order: 2 !important;
}

.modal-overlay .bank-transfer-card .payment-note {
  order: 3 !important;
}

.modal-overlay .bank-transfer-card > .vietqr-box + div:not(.bank-transfer-head):not(.payment-copy-stack) {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.modal-overlay .bank-transfer-card .bank-transfer-head,
.bank-transfer-modal-card .bank-transfer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 12px 0 0 !important;
  padding: 0 2px !important;
}

.modal-overlay .bank-transfer-card .bank-transfer-head > div,
.bank-transfer-modal-card .bank-transfer-head > div {
  min-width: 0 !important;
}

.modal-overlay .bank-transfer-card .bank-transfer-head strong,
.bank-transfer-modal-card .bank-transfer-head strong {
  display: block !important;
  color: #180814 !important;
  font-size: 15.5px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

.modal-overlay .bank-transfer-card .bank-transfer-head span,
.bank-transfer-modal-card .bank-transfer-head span,
.modal-overlay .bank-transfer-card .payment-note,
.bank-transfer-modal-card .payment-note,
.modal-overlay .bank-transfer-card .vietqr-caption span,
.bank-transfer-modal-card .vietqr-caption span {
  color: #5f344d !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.modal-overlay .bank-transfer-card .open-qr-btn,
.modal-overlay .bank-transfer-card .copy-mini,
.bank-transfer-modal-card .open-qr-btn,
.bank-transfer-modal-card .copy-mini {
  min-width: 54px !important;
  min-height: 34px !important;
  max-width: 122px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(255, 91, 143, 0.34) !important;
  color: #e7356e !important;
  font-weight: 900 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12) !important;
  white-space: normal !important;
}

.modal-overlay .bank-transfer-card .vietqr-box,
.bank-transfer-modal-card .vietqr-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px dashed rgba(255, 91, 143, 0.32) !important;
  overflow: hidden !important;
}

.modal-overlay .bank-transfer-card .vietqr-frame,
.bank-transfer-modal-card .vietqr-frame {
  position: relative !important;
  width: min(252px, 100%) !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(90, 20, 59, 0.08) !important;
  overflow: hidden !important;
}

.modal-overlay .bank-transfer-card .vietqr-frame::before,
.bank-transfer-modal-card .vietqr-frame::before {
  content: 'Đang tải QR...' !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  color: #8a4766 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  background: #fff !important;
  z-index: 0 !important;
}

.modal-overlay .bank-transfer-card .vietqr-frame-loaded::before,
.bank-transfer-modal-card .vietqr-frame-loaded::before {
  content: none !important;
  display: none !important;
}

.modal-overlay .bank-transfer-card .vietqr-img,
.bank-transfer-modal-card .vietqr-img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

.modal-overlay .bank-transfer-card > .vietqr-box > .vietqr-img {
  width: min(252px, 100%) !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.modal-overlay .bank-transfer-card .vietqr-frame-error .vietqr-img,
.bank-transfer-modal-card .vietqr-frame-error .vietqr-img {
  display: none !important;
}

.modal-overlay .bank-transfer-card .vietqr-frame-error::before,
.bank-transfer-modal-card .vietqr-frame-error::before {
  content: 'QR chưa tải được. Vui lòng copy thông tin bên dưới.' !important;
  max-width: 176px !important;
  color: #7a405f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.modal-overlay .bank-transfer-card .vietqr-caption,
.bank-transfer-modal-card .vietqr-caption {
  display: grid !important;
  gap: 2px !important;
  text-align: center !important;
}

.modal-overlay .bank-transfer-card .vietqr-caption strong,
.bank-transfer-modal-card .vietqr-caption strong {
  color: #180814 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.payment-copy-stack {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.modal-overlay .bank-transfer-card .payment-copy-row,
.bank-transfer-modal-card .payment-copy-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(255, 126, 178, 0.16) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

.modal-overlay .bank-transfer-card .payment-copy-row span,
.bank-transfer-modal-card .payment-copy-row span {
  color: #9d617c !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.modal-overlay .bank-transfer-card .payment-copy-row strong,
.bank-transfer-modal-card .payment-copy-row strong {
  display: block !important;
  margin-top: 3px !important;
  color: #2a1320 !important;
  font-size: 14px !important;
  line-height: 1.34 !important;
  font-weight: 950 !important;
  overflow-wrap: anywhere !important;
}

.modal-overlay .bank-transfer-card .payment-copy-row-wide,
.bank-transfer-modal-card .payment-copy-row-wide {
  align-items: start !important;
}

.modal-overlay .bank-transfer-card .payment-copy-row-wide strong,
.bank-transfer-modal-card .payment-copy-row-wide strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12.5px !important;
  letter-spacing: -0.02em !important;
}

.modal-overlay .bank-transfer-card .payment-note,
.bank-transfer-modal-card .payment-note {
  margin-top: 12px !important;
  padding: 11px 12px !important;
  border-radius: 16px !important;
  background: rgba(255, 236, 245, 0.74) !important;
  border: 1px solid rgba(255, 126, 178, 0.22) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

#page-orders .orders-shell {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

#page-orders .order-full {
  position: relative !important;
  overflow: hidden !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 91, 143, 0.16), transparent 36%),
    linear-gradient(145deg, #12040d 0%, #070205 100%) !important;
  border: 1px solid rgba(255, 126, 178, 0.24) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#page-orders .order-full::before,
#page-orders .order-full::after {
  content: none !important;
  display: none !important;
}

#page-orders .order-compact {
  padding: 14px !important;
}

#page-orders .order-compact .order-full-header {
  margin-bottom: 12px !important;
}

#page-orders .order-compact-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 70px !important;
  padding: 11px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 126, 178, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 126, 178, 0.16) !important;
}

#page-orders .order-compact-thumb {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 17px !important;
  overflow: hidden !important;
  display: block !important;
  background: rgba(255, 246, 250, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
}

#page-orders .order-compact-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

#page-orders .order-compact-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
}

#page-orders .order-compact-main strong {
  color: #fff8fb !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-orders .order-compact-main span,
#page-orders .order-compact-main em {
  color: rgba(255, 218, 232, 0.72) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-orders .order-compact .order-full-footer {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#page-orders .order-compact .order-total-block {
  min-width: 0 !important;
}

#page-orders .order-full:not(.order-compact) .order-total-block {
  width: max-content !important;
  min-width: 178px !important;
  max-width: 100% !important;
  justify-self: end !important;
  margin-left: auto !important;
  padding-right: 2px !important;
}

#page-orders .order-full:not(.order-compact) .order-total-line > span {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

#page-orders .order-detail-btn {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  color: #ffe8f1 !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#page-orders .order-full-header {
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#page-orders .order-full-id {
  color: #fff8fb !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

#page-orders .order-full-date {
  color: rgba(255, 218, 232, 0.72) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

#page-orders .order-status-pill {
  flex: 0 0 auto !important;
  max-width: 128px !important;
  padding: 7px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 91, 143, 0.14) !important;
  border: 1px solid rgba(255, 126, 178, 0.28) !important;
  color: #ff9ac6 !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

#page-orders .order-items {
  display: grid !important;
  gap: 8px !important;
}

#page-orders .order-item-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-areas: "img name price" "img qty price" !important;
  gap: 2px 10px !important;
  align-items: center !important;
  padding: 9px !important;
  border: 1px solid rgba(255, 126, 178, 0.13) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

#page-orders .order-item-img { grid-area: img !important; border-radius: 13px !important; }
#page-orders .order-item-name { grid-area: name !important; color: #fff8fb !important; font-weight: 850 !important; line-height: 1.35 !important; }
#page-orders .order-item-qty { grid-area: qty !important; color: rgba(255, 218, 232, 0.70) !important; font-weight: 800 !important; }
#page-orders .order-item-price { grid-area: price !important; color: #fff8fb !important; font-weight: 950 !important; }

#page-orders .order-info-stack {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

#page-orders .order-info-card {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255, 246, 250, 0.08) !important;
  border: 1px solid rgba(255, 126, 178, 0.16) !important;
  color: #fff8fb !important;
}

#page-orders .order-info-payment {
  background: rgba(255, 246, 250, 0.16) !important;
  border-color: rgba(255, 174, 207, 0.28) !important;
}

#page-orders .order-info-icon {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ff9ac6 !important;
}

#page-orders .order-info-icon svg {
  width: 17px !important;
  height: 17px !important;
}

#page-orders .order-info-body {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#page-orders .order-info-body strong {
  color: #fff8fb !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
}

#page-orders .order-info-body span {
  color: rgba(255, 218, 232, 0.74) !important;
  font-size: 11px !important;
  line-height: 1.42 !important;
}

#page-orders .order-info-cta {
  min-width: 72px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  background: #fff8fb !important;
  color: #e7356e !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.14) !important;
}

#page-orders .order-full-footer {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding-top: 12px !important;
  margin-top: 0 !important;
}

#page-orders .order-total-block {
  display: grid !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 2px 2px 0 !important;
}

#page-orders .order-fee-line,
#page-orders .order-total-line {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

#page-orders .order-fee-line > span,
#page-orders .order-total-line > span {
  color: rgba(255, 218, 232, 0.72) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}

#page-orders .order-fee-line > strong {
  color: #ffe2ef !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#page-orders .order-total {
  color: #ff7eb3 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#page-orders .order-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#page-orders .order-actions .btn {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 15px !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#page-orders .order-actions .order-action-main {
  grid-column: span 2 !important;
  color: #fff !important;
}

#page-orders .order-actions .order-action-reorder {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
}

#page-orders .order-actions .order-action-danger {
  color: #ff85b7 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 126, 178, 0.18) !important;
}

#page-orders .order-actions .order-action-sub {
  color: #ffe8f1 !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.order-edit-sheet {
  border-radius: 16px !important;
}

.order-edit-sheet .form-input,
.order-edit-sheet .form-textarea {
  background: #fff !important;
  color: #2a1320 !important;
  border-color: rgba(255, 126, 178, 0.28) !important;
}

.order-edit-hint {
  margin-top: 10px !important;
  color: var(--theme-body) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.order-detail-sheet .order-detail-info-stack {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.order-detail-sheet .order-info-card {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px !important;
  border-radius: 17px !important;
  background: #fff8fb !important;
  border: 1px solid rgba(255, 126, 178, 0.22) !important;
  color: #2a1320 !important;
}

.order-detail-sheet .order-info-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  background: #ffeaf3 !important;
  color: #e7356e !important;
}

.order-detail-sheet .order-info-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.order-detail-sheet .order-info-body {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.order-detail-sheet .order-info-body strong {
  color: #2a1320 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.order-detail-sheet .order-info-body span {
  color: #70405a !important;
  font-size: 11px !important;
  line-height: 1.42 !important;
}

.order-detail-sheet .order-info-cta {
  min-height: 36px !important;
  padding: 0 13px !important;
  background: #fff !important;
  color: #e7356e !important;
  border: 1px solid rgba(255, 91, 143, 0.30) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12) !important;
}

.sale-call-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 8px 8px 2px;
  text-align: center;
}

.sale-call-glow {
  position: absolute;
  inset: -56px 18px auto;
  height: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 126, 179, 0.28), rgba(255, 126, 179, 0));
  filter: blur(2px);
  z-index: -1;
}

.sale-call-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    rgba(255, 255, 255, 0.72),
    #fff3f8;
  color: #d8287b;
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 3px rgba(255, 79, 139, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.sale-call-avatar svg {
  width: 36px;
  height: 36px;
  margin: 0;
  stroke-width: 1.5;
}

.sale-call-kicker {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 244, 248, 0.96);
  color: #d8287b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 126, 179, 0.20);
}

.sale-call-name {
  color: #2a1320;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.sale-phone-pill {
  border: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #d8287b;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 1px 3px rgba(90, 20, 59, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 126, 179, 0.20);
  cursor: pointer;
}

.sale-phone-pill svg {
  width: 18px;
  height: 18px;
  margin: 0;
}

.sale-call-note {
  max-width: 260px;
  color: rgba(90, 20, 59, 0.56);
  font-size: 12px;
  line-height: 1.45;
}

/* Cart text recovery: give product names real width and up to 3 compact lines. */
#page-cart .cart-items-card .cart-line {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  grid-template-areas: "check product" !important;
  column-gap: 10px !important;
  align-items: center !important;
  min-height: 122px !important;
  padding: 12px 52px 12px 12px !important;
}

#page-cart .cart-items-card .cart-product-open {
  grid-area: product !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  grid-template-areas: "image info" !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-width: 0 !important;
}

#page-cart .cart-items-card .cart-product-open[role="button"] {
  cursor: pointer !important;
}

#page-cart .cart-items-card .cart-check {
  grid-area: check !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
}

#page-cart .cart-items-card .cart-img {
  grid-area: image !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 17px !important;
}

#page-cart .cart-items-card .cart-line .flex-1 {
  grid-area: info !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
}

#page-cart .cart-items-card .cart-line .cart-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #fff8fb !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34) !important;
}

#page-cart .cart-items-card .cart-product-meta {
  max-width: 100% !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 248, 251, 0.08) !important;
  border: 1px solid rgba(255, 124, 168, 0.22) !important;
  color: rgba(255, 234, 242, 0.82) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-cart .cart-items-card .cart-line-price {
  width: auto !important;
  max-width: 100% !important;
  margin: 2px 0 4px !important;
  color: #ff83b4 !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

#page-cart .cart-items-card .cart-qty {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
  height: 30px !important;
  grid-template-columns: 28px 38px 28px !important;
  justify-self: start !important;
  margin: 0 !important;
}

#page-cart .cart-items-card .cart-qty .qty-btn {
  width: 28px !important;
  height: 30px !important;
  font-size: 16px !important;
}

#page-cart .cart-items-card .cart-qty span {
  width: 38px !important;
  min-width: 38px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 12.5px !important;
}

#page-cart .cart-items-card .cart-line-actions {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  grid-area: unset !important;
  width: 36px !important;
  height: 36px !important;
}

#page-cart .cart-items-card .cart-remove {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
}

/* Product favorites: per-card heart plus header favorite filter. */
#page-products .favorite-toggle.active,
#page-products .product-favorite-btn.active {
  background:
    rgba(255, 255, 255, 0.50),
    linear-gradient(145deg, #ff73ad 0%, #ef2f86 100%) !important;
  border-color: rgba(255, 214, 232, 0.78) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(239, 47, 134, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

#page-products .product-grid-card {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  border-radius: 16px !important;
  min-width: 0 !important;
}

#page-products .product-grid-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 124, 168, 0.18), transparent 56%),
    #fff2f6 !important;
}

#page-products .product-grid-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

#page-products .product-grid-img img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

#page-products .product-grid-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 10px 4px 2px !important;
}

#page-products .product-card-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
}

#page-products .product-favorite-btn {
  position: absolute !important;
  z-index: 30 !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 8px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 143, 191, 0.46) !important;
  background:
    rgba(255, 255, 255, 0.86),
    rgba(255, 249, 252, 0.98) !important;
  color: #e73589 !important;
  box-shadow: 0 1px 3px rgba(70, 13, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(12px) !important;
}

#page-products .product-select-btn {
  position: static !important;
  z-index: 30 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 15px !important;
  flex: 0 0 40px !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#page-products .product-select-restock {
  background:
    rgba(255, 255, 255, 0.72),
    rgba(255, 249, 252, 0.98) !important;
  color: #e73589 !important;
  border-color: rgba(255, 143, 191, 0.42) !important;
}

#page-products .product-favorite-btn svg,
#page-products .favorite-toggle svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

#page-products .product-favorite-btn.active svg,
#page-products .favorite-toggle.active svg {
  fill: currentColor !important;
}

#page-products .product-grid-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 42px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
}

#page-products .product-category-chip {
  min-height: 44px !important;
  padding: 9px 16px !important;
  justify-content: center !important;
  gap: 0 !important;
}

#page-products .product-category-chip .category-chip-icon {
  display: none !important;
}

#page-products .product-category-chip .category-chip-copy {
  align-items: center !important;
  text-align: center !important;
}

/* Icon centering audit: icon-only controls must not inherit inline icon offsets. */
.screen-round-action,
.profile-round-action,
.action-icon,
.home-vibe-icon,
.profile-contact-icon,
.profile-order-icon,
.profile-utility-icon,
.profile-support-icon,
.course-overview-icon,
.course-next-icon,
.order-quick-icon,
.menu-icon,
.cart-summary-icon,
.cart-voucher-icon,
.payment-choice-icon,
.category-chip-icon,
.calendar-cta-icon,
.my-course-mini-icon,
.support-icon,
.notif-icon,
.round-add,
.product-select-btn,
.product-favorite-btn,
.cart-check,
.cart-remove,
.qty-btn,
.course-round-next,
.copy-mini,
.ai-chat-send-btn,
.ai-chat-fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  text-align: center !important;
}

.screen-round-action > svg,
.profile-round-action > svg,
.action-icon > svg,
.home-vibe-icon > svg,
.profile-contact-icon > svg,
.profile-order-icon > svg,
.profile-utility-icon > svg,
.profile-support-icon > svg,
.course-overview-icon > svg,
.course-next-icon > svg,
.order-quick-icon > svg,
.menu-icon > svg,
.cart-summary-icon > svg,
.cart-voucher-icon > svg,
.payment-choice-icon > svg,
.category-chip-icon > svg,
.calendar-cta-icon > svg,
.my-course-mini-icon > svg,
.support-icon > svg,
.notif-icon > svg,
.round-add > svg,
.product-select-btn > svg,
.product-favorite-btn > svg,
.cart-check > svg,
.cart-remove > svg,
.qty-btn > svg,
.course-round-next > svg,
.copy-mini > svg,
.ai-chat-send-btn > svg,
.ai-chat-fab > svg {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
}

.tab-item svg.tab-icon {
  display: block !important;
  margin: 0 auto 2px !important;
  flex: 0 0 auto !important;
}

/* Product action hit areas: keep first row buttons above decorative overlays. */
#page-products .product-category-deck {
  position: relative !important;
  z-index: 3 !important;
}

#page-products .product-results-panel {
  position: relative !important;
  z-index: 8 !important;
}

#page-products .product-grid {
  position: relative !important;
  z-index: 9 !important;
}

#page-products .product-grid-card {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

#page-products .product-select-btn,
#page-home .round-add {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#page-products .product-favorite-btn {
  z-index: 30 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#page-home .home-empty-card {
  align-items: center !important;
  gap: 10px !important;
  padding-left: 14px !important;
}

#page-home .home-empty-card::before,
#page-home .home-empty-card::after {
  content: none !important;
  display: none !important;
}

#page-home .home-empty-card > svg {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 12px rgba(255, 91, 143, 0.34)) !important;
}

#page-home .home-empty-card-voucher > svg {
  color: #ffb23f !important;
}

#page-home .home-empty-card-repurchase > svg {
  color: #ff5b8f !important;
}

#page-home .home-latest-order {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 68px !important;
  padding: 12px 14px !important;
  margin-bottom: 0 !important;
}

#page-home .home-latest-order .order-quick-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
}

#page-home .home-latest-order .order-quick-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: 3px !important;
}

#page-home .home-latest-order .order-quick-id {
  overflow: hidden !important;
  color: var(--theme-premium-text) !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-home .home-latest-order .order-quick-amount {
  color: #ff7ca8 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

#page-home .home-latest-order-status {
  max-width: 76px !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  color: #ff9ec1 !important;
  background: rgba(255, 91, 143, 0.16) !important;
  border: 1px solid rgba(255, 91, 143, 0.26) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
}

.product-grid-name,
.home-product-title,
.product-name,
.product-detail-title,
.ai-product-name,
.ai-cross-name,
.ai-chat-inline-product-name strong,
.ai-combo-item-name,
.repurchase-name,
.cart-name,
.home-course-title,
.course-page-title,
.course-card-title,
.course-detail-title,
.course-study-title,
.ai-chat-course-title,
.ai-combo-title {
  text-transform: uppercase !important;
}

#page-courses .course-page-title {
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

#page-courses .course-meta-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

#page-courses .course-page-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 9px !important;
  min-width: 0 !important;
  margin-top: 0 !important;
}

#page-courses .course-page-meta span,
#page-courses .course-meta-row .course-type-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  min-width: 0 !important;
}

#page-courses .course-page-meta svg,
#page-courses .course-meta-row .course-type-chip svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;
}

#page-courses .course-meta-row .course-type-chip {
  justify-self: end !important;
  white-space: nowrap !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
}

#page-courses .course-meta-row .course-type-chip.video {
  background: rgba(255, 91, 143, 0.16) !important;
  border: 1px solid rgba(255, 91, 143, 0.34) !important;
  color: #ff6fa2 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-courses .course-meta-row .course-type-chip.offline {
  background: rgba(255, 178, 63, 0.16) !important;
  border: 1px solid rgba(255, 178, 63, 0.34) !important;
  color: #ffbd57 !important;
  box-shadow: 0 1px 3px rgba(255, 178, 63, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-courses .course-meta-row .course-type-chip.live,
#page-mycourses .course-type-chip.live {
  background: rgba(122, 92, 255, 0.16) !important;
  border: 1px solid rgba(160, 140, 255, 0.34) !important;
  color: #b6a7ff !important;
  box-shadow: 0 1px 3px rgba(122, 92, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-courses .course-price-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

#page-courses .course-price-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  line-height: 1.05 !important;
}

#page-courses .course-price-stack strong {
  font-size: 18.5px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
}

#page-courses .course-price-stack del {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  opacity: 0.62 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#page-courses .course-price-stack span {
  display: none !important;
}

#page-courses .course-cta {
  justify-self: end !important;
}

/* My courses: synchronize icon capsules, badges, buttons and typography. */
#page-mycourses,
#page-mycourses button,
#page-mycourses .calendar-cta,
#page-mycourses .enrolled-course-compact,
#page-mycourses .course-type-chip,
#page-mycourses .badge {
  font-family: 'Be Vietnam Pro', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#page-mycourses .calendar-cta {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

#page-mycourses .calendar-cta-icon,
#page-mycourses .enrolled-img.small {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 248, 250, 0.08) !important;
  border: 1px solid rgba(255, 91, 143, 0.34) !important;
  color: #ff7ca8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(255, 63, 127, 0.12) !important;
}

#page-mycourses .calendar-cta-icon svg,
#page-mycourses .enrolled-img.small svg {
  width: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  stroke-width: 1.5 !important;
  color: currentColor !important;
}

#page-mycourses .calendar-cta-title,
#page-mycourses .enrolled-name,
#page-mycourses .enrolled-name.compact {
  color: var(--theme-premium-text) !important;
  font-family: 'Be Vietnam Pro', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.24 !important;
  text-transform: uppercase !important;
}

#page-mycourses .calendar-cta-text,
#page-mycourses .enrolled-teacher,
#page-mycourses .enrolled-mini-line,
#page-mycourses .enrolled-footer.compact {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}

#page-mycourses .enrolled-course-compact {
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

#page-mycourses .enrolled-compact-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#page-mycourses .badge,
#page-mycourses .course-type-chip {
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 91, 143, 0.16) !important;
  border: 1px solid rgba(255, 91, 143, 0.34) !important;
  color: #ff7ca8 !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-mycourses .course-type-chip svg,
#page-mycourses .enrolled-mini-line svg {
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  vertical-align: -2px !important;
}

#page-mycourses .enrolled-footer.compact {
  align-items: center !important;
}

#page-mycourses .enrolled-footer.compact span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: #fff8fb !important;
  background: linear-gradient(135deg, #ff7eaf 0%, #ff3f86 100%) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

#page-mycourses .enrolled-course-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

#page-mycourses .enrolled-course-with-image {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 11px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 13px !important;
  box-sizing: border-box !important;
}

#page-mycourses .enrolled-course-media {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
  align-self: stretch !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 124, 168, 0.14), transparent 56%),
    #fff2f7 !important;
  border: 1px solid rgba(255, 91, 143, 0.28) !important;
  box-shadow: 0 1px 3px rgba(20, 7, 13, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#page-mycourses .enrolled-course-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

#page-mycourses .enrolled-course-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#page-mycourses .enrolled-course-with-image .enrolled-compact-top {
  justify-content: flex-end !important;
  margin: -2px 0 7px !important;
}

#page-mycourses .enrolled-course-with-image .enrolled-name.compact {
  min-height: 0 !important;
  margin: 0 0 6px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}

#page-mycourses .enrolled-course-tags {
  display: flex !important;
  align-items: center !important;
  margin-top: 7px !important;
}

#page-mycourses .enrolled-course-with-image .enrolled-mini-line {
  min-height: 0 !important;
  margin-top: 8px !important;
}

#page-mycourses .enrolled-course-with-image .enrolled-progress.compact {
  margin: 10px 0 8px !important;
}

/* Course detail readability: bright information blocks inside the premium shell. */
#page-course-detail .course-study-title {
  color: #FFFDFE !important;
  text-shadow: 0 2px 14px rgba(20, 7, 13, 0.42) !important;
}

#page-course-detail .course-study-sub,
#page-course-detail .course-study-sub span {
  color: #FFF1F7 !important;
  font-weight: 850 !important;
}

#page-course-detail .course-detail-desc {
  color: #FFF5F9 !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  line-height: 1.68 !important;
}

#page-course-detail .course-stat,
#page-course-detail .product-info-grid div {
  background: #FFFDFE !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 1px 3px rgba(97, 19, 54, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  color: #3A1B2A !important;
}

#page-course-detail .course-stat strong,
#page-course-detail .product-info-grid strong {
  color: #D92F78 !important;
  font-weight: 1000 !important;
}

#page-course-detail .course-stat span,
#page-course-detail .product-info-grid span {
  color: #63374D !important;
  font-weight: 850 !important;
}

#page-course-detail .checkout-trust-note,
#page-course-detail .course-page-meta,
#page-course-detail .lesson-list-title span {
  color: #FCE4EF !important;
  font-weight: 850 !important;
}

#page-course-detail .lesson-player,
#page-course-detail .lesson-list.learning .lesson-item {
  background: #FFFDFE !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 1px 3px rgba(97, 19, 54, 0.20) !important;
}

#page-course-detail .lesson-player-title,
#page-course-detail .lesson-list-title strong,
#page-course-detail .lesson-title {
  color: #2A1320 !important;
  font-weight: 950 !important;
}

#page-course-detail .lesson-meta-line {
  color: #684052 !important;
  font-weight: 800 !important;
}

#page-course-detail .lesson-video-shell .lesson-video-text {
  color: rgba(255, 255, 255, 0.94) !important;
  font-weight: 850 !important;
}

#page-course-detail .lesson-num {
  background: linear-gradient(135deg, #FF7CA8 0%, #FF3F7F 100%) !important;
  color: #FFFFFF !important;
}

/* Payment brands and inline QR: make checkout methods recognizable at a glance. */
.payment-brand-logo {
  min-width: 50px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: 'Be Vietnam Pro', Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  box-shadow: 0 1px 3px rgba(90, 20, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.payment-choice-logo {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.payment-choice-logo .payment-brand-logo {
  min-width: 52px !important;
  width: 52px !important;
  height: 52px !important;
  padding: 0 4px !important;
  border-radius: 17px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  border: 2px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 1px 3px rgba(90, 20, 59, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.payment-brand-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 10px 0 12px !important;
}

.payment-brand-zalopay { background: linear-gradient(135deg, #0E6BFF 0%, #004BD6 100%) !important; }
.payment-brand-momo { background: linear-gradient(135deg, #D82B8A 0%, #A50064 100%) !important; }
.payment-brand-vnpay { background: linear-gradient(135deg, #0A72D8 0%, #00A6A6 100%) !important; }
.payment-brand-atm { background: linear-gradient(135deg, #1F7A4D 0%, #0E5E9C 100%) !important; }
.payment-brand-bank { background: linear-gradient(135deg, #FF7CA8 0%, #FF3F7F 100%) !important; }
.payment-brand-tpbank { background: linear-gradient(135deg, #7B2CBF 0%, #FF7A00 100%) !important; }
.payment-brand-vietqr { background: linear-gradient(135deg, #1DAA61 0%, #0D8DD8 100%) !important; }
.payment-brand-cod { background: linear-gradient(135deg, #6B7280 0%, #374151 100%) !important; }

#page-checkout .payment-choice-main > div:last-child {
  min-width: 0 !important;
}

#page-checkout .bank-checkout-card .vietqr-box,
#page-checkout .bank-transfer-preview-card .vietqr-box {
  margin-top: 2px !important;
}

#page-checkout .bank-checkout-card .vietqr-frame,
#page-checkout .bank-transfer-preview-card .vietqr-frame {
  width: min(190px, 100%) !important;
}

#page-checkout .bank-checkout-card .payment-copy-stack,
#page-checkout .bank-transfer-preview-card .payment-copy-stack {
  margin-top: 8px !important;
}

/* Product/course discovery controls: same compact proportions across both tabs. */
#page-products .products-hero .product-search-box,
#page-courses .courses-hero .courses-search {
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 16px !important;
  padding: 0 18px !important;
  gap: 11px !important;
}

#page-products .products-hero .product-search-box input,
#page-courses .courses-hero .courses-search span {
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}

#page-products .products-hero .product-search-box svg,
#page-courses .courses-hero .courses-search svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}

#page-products .product-category-grid.compact,
#page-courses .course-status-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 7px !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

#page-products .product-category-deck {
  overflow: visible !important;
  padding-bottom: 10px !important;
}

#page-products .product-category-deck::before,
#page-products .product-category-deck::after {
  content: none !important;
  display: none !important;
}

#page-products .product-category-grid.compact::-webkit-scrollbar,
#page-courses .course-status-tabs::-webkit-scrollbar {
  display: none !important;
}

#page-products .product-category-chip,
#page-courses .course-status-pill {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 10.8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#page-products .product-category-chip {
  flex: 0 0 auto !important;
  max-width: none !important;
  scroll-snap-align: start !important;
}

#page-products .product-category-chip.stock-filter {
  min-width: 116px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

#page-products .product-category-chip.stock-filter .category-chip-copy strong,
#page-products .product-category-chip.stock-filter .category-chip-copy small {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#page-courses .course-status-pill {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
}

#page-products .product-category-chip .category-chip-copy strong {
  font-size: 10.8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#page-products .product-category-chip .category-chip-copy small,
#page-products .product-category-chip .category-chip-icon {
  display: none !important;
}

/* AI advisor identity: header/FAB use icons; chat history keeps the bot portrait. */
.ai-chat-bot-avatar {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-color: #ffeaf3 !important;
  border: 2px solid rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.home-actions .ai-header-action {
  position: relative !important;
  overflow: visible !important;
}

#page-ai-chat .ai-chat-bot-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
}

#page-ai-chat .ai-chat-bot-avatar img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

#page-ai-chat .ai-chat-bot-avatar img.is-error {
  opacity: 0 !important;
}

#page-products .product-category-deck,
#page-courses .courses-deck {
  overflow: visible !important;
}

#page-products .product-category-grid.compact,
#page-courses .course-status-tabs {
  width: calc(100% + 32px) !important;
  margin-right: -16px !important;
  margin-left: -16px !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
  scroll-padding-inline: 16px !important;
}

#page-products .product-category-chip.active,
#page-courses .course-status-pill.active {
  position: relative !important;
  z-index: 2 !important;
  transform: translateY(-1px) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  border-color: rgba(255, 91, 143, 0.72) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.30) !important;
}

#page-ai-chat .ai-chat-bot-avatar svg {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  color: #ffffff !important;
}

img[alt="Mewart AI"],
.ai-header-avatar,
.ai-fab-avatar,
.ai-avatar-icon {
  display: none !important;
}

#page-ai-chat .ai-chat-empty .ai-chat-preview-card,
#page-ai-chat .ai-chat-empty .ai-chat-empty-desc,
#page-ai-chat .ai-chat-empty .ai-chat-suggest-list {
  display: none !important;
}

#page-ai-chat .ai-chat-empty-body {
  justify-content: center !important;
  gap: 18px !important;
  padding: 34px 18px 28px !important;
}

#page-ai-chat .ai-chat-empty-title {
  width: 100% !important;
  margin: 0 0 2px !important;
  color: var(--theme-premium-text) !important;
  font-size: 25px !important;
  font-weight: 1000 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.045em !important;
  text-align: left !important;
}

#page-ai-chat .ai-chat-empty-copy {
  display: none !important;
}

#page-ai-chat .ai-chat-empty-input {
  border-radius: 16px !important;
  padding: 14px !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 124, 168, 0.24), transparent 34%),
    rgba(255, 248, 250, 0.10) !important;
  border: 1px solid rgba(255, 124, 168, 0.38) !important;
  box-shadow: 0 1px 3px rgba(255, 63, 127, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#page-ai-chat .ai-chat-empty .ai-chat-textarea {
  min-height: 128px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff7fb !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#page-ai-chat .ai-chat-empty .ai-chat-textarea::placeholder {
  color: rgba(255, 229, 239, 0.76) !important;
}

#page-ai-chat .ai-chat-empty-actions {
  justify-content: flex-end !important;
  gap: 10px !important;
}

#page-ai-chat .ai-chat-empty-chat .ai-chat-empty-scroll {
  padding-top: 18px !important;
  padding-bottom: 96px !important;
}

#page-ai-chat .ai-chat-empty-chat .ai-chat-empty-messages {
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
}

#page-ai-chat .ai-chat-empty-chat .ai-chat-welcome-msg {
  margin-top: 0 !important;
}

#page-ai-chat .ai-chat-empty-chat .ai-chat-msg-bubble {
  max-width: 292px !important;
}

/* Keep card titles readable instead of clipping Vietnamese/product names. */
#page-home .home-course-title,
#page-products .product-grid-name,
#page-courses .course-page-title,
.course-card-title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#page-home .home-course-title {
  margin-bottom: 2px !important;
  font-size: 13.2px !important;
  line-height: 1.28 !important;
}

#page-home .home-product-title,
#page-products .product-grid-name {
  line-height: 1.25 !important;
}

/* Home featured products must remain compact in the Zalo WebView. */
#page-home .home-product-grid {
  align-items: stretch !important;
}

#page-home .home-product-card {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  min-height: 132px !important;
  height: 132px !important;
  max-height: 132px !important;
  overflow: hidden !important;
}

#page-home .home-product-card > div:nth-child(2) {
  min-width: 0 !important;
  align-self: center !important;
  padding-right: 46px !important;
}

#page-home .home-product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 34px !important;
  min-height: 0 !important;
  line-height: 1.24 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  padding-right: 0 !important;
}

#page-home .home-product-img {
  width: 82px !important;
  height: 82px !important;
  flex: 0 0 82px !important;
}

#page-home .home-product-price {
  margin-top: 5px !important;
}

#page-home .home-product-price.product-price-stack {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-areas:
    "sale sale"
    "market badge" !important;
  justify-content: start !important;
  align-items: center !important;
  column-gap: 5px !important;
  row-gap: 3px !important;
  line-height: 1.05 !important;
}

#page-home .home-product-price.product-price-stack .product-sale-price {
  grid-area: sale !important;
  white-space: nowrap !important;
  font-size: 17px !important;
}

#page-home .home-product-price.product-price-stack .product-market-price {
  grid-area: market !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}

#page-home .home-product-price.product-price-stack .product-discount-badge {
  grid-area: badge !important;
  justify-self: start !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
}

#page-home .home-product-card .cart-meta {
  margin-top: 6px !important;
  font-size: 11.5px !important;
  line-height: 1.18 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#page-home .home-product-card .round-add,
#page-home .home-product-card .round-add.outline {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  justify-self: auto !important;
  align-self: auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-width: 1.5px !important;
  box-shadow: 0 1px 3px rgba(242, 71, 143, 0.34), 0 0 0 2px rgba(255, 127, 190, 0.15) !important;
  z-index: 2 !important;
}

#page-home .home-product-card .round-add svg,
#page-home .home-product-card .round-add.outline svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5 !important;
}

.stock-status-text,
#page-products .product-grid-card .stock-status-text,
#page-product-detail .stock-status-text,
#page-home .home-product-card .stock-status-text {
  color: #ffd84d !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 8px rgba(255, 216, 77, 0.28) !important;
}

#page-courses .course-page-card {
  align-items: start !important;
}

#page-courses .course-page-title {
  font-size: 13.2px !important;
  line-height: 1.24 !important;
  margin-bottom: 8px !important;
}

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