/* LAPBUFFXU final public UI layer
   Presentation only: no functional hooks, forms, endpoints, or data selectors are changed. */
:root {
  --ui-brand: #4169d8;
  --ui-brand-strong: #3155c2;
  --ui-ink: #1e293b;
  --ui-muted: #64748b;
  --ui-line: #e2e8f0;
  --ui-soft: #f8fafc;
  --ui-radius-lg: 1.25rem;
  --ui-radius-md: .875rem;
  --ui-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
  --ui-shadow-md: 0 14px 32px rgba(15, 23, 42, .10);
}

html, body { width: 100%; min-width: 0; overflow-x: hidden; background: #fff !important; color: var(--ui-ink) !important; }
main { width: 100%; min-width: 0; }
.section, .page-title, .detail, .dashboard, .products, .auth,
.store-container, .services-container, .orders-container, .order-detail-container,
.child-products-page .store-container { width: 90%; max-width: 77.5rem; margin-inline: auto; }

.site-header { height: 4.5rem; min-height: 4.5rem; background: rgba(255,255,255,.94) !important; border-bottom: 1px solid var(--ui-line) !important; box-shadow: 0 5px 20px rgba(15,23,42,.06) !important; backdrop-filter: blur(16px); }
.site-nav > a, .nav-trigger { color: #475569 !important; border-radius: var(--ui-radius-md); }
.site-nav > a:hover, .nav-trigger:hover { color: var(--ui-brand) !important; background: #eef2ff !important; }
.btn, .service-button, .orders-button { min-height: 2.75rem; border-radius: var(--ui-radius-md) !important; font-weight: 750; transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease; }
.btn:hover, .service-button:hover, .orders-button:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-md); }
.btn:active, .service-button:active, .orders-button:active { transform: translateY(1px) scale(.97) !important; }
.primary, .service-button--primary, .orders-button--primary { background: linear-gradient(135deg, var(--ui-brand), #6657c9) !important; color: #fff !important; }
.secondary, .service-button--ghost, .orders-button--ghost { background: #eef2ff !important; color: var(--ui-brand) !important; border-color: #dbe4ff !important; }

.card, .panel, .form, .auth-card, .auth-face, .home-product-card, .product-card,
.service-card, .service-detail-card, .service-order-detail-card, .orders-stat-card,
.orders-filter, .orders-table-card, .order-detail-card, .deposit-create-card,
.deposit-history-card, .announcement-dialog { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important; background: #fff !important; box-shadow: var(--ui-shadow-sm) !important; }
.card:hover, .home-product-card:hover, .product-card:hover, .service-card:hover { transform: translateY(-4px); border-color: #c7d2fe !important; box-shadow: var(--ui-shadow-md) !important; }
.form input, .form select, .form textarea, .panel input, .panel select, .panel textarea,
.auth-form input, .orders-filter input, .orders-filter select { min-height: 2.75rem; border: 1px solid #cbd5e1; border-radius: var(--ui-radius-md); background: #fff; color: var(--ui-ink); }
.form input:focus, .form select:focus, .form textarea:focus, .panel input:focus, .panel select:focus, .panel textarea:focus { border-color: #8aa4ed; box-shadow: 0 0 0 3px rgba(65,105,216,.13); outline: 0; }

.home-products, .store-page { width: 90%; max-width: 77.5rem; margin-inline: auto; }
.home-product-grid, .product-grid, .child-products-grid, .services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; min-width: 0; }
.home-product-card, .product-card { min-width: 0; overflow: hidden; }
.home-product-image, .product-card__image { background: #f8fafc !important; }
.home-product-body, .product-card__body, .product-card .card-body { padding: 1rem !important; background: #fff !important; }
.home-product-body h3, .product-card .product-card__name { color: var(--ui-ink) !important; font-size: .9375rem; }
.home-product-price, .product-card .product-card__price { color: var(--ui-brand) !important; font-size: 1.05rem; }

.dashboard .dash-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "account stats" "shortcuts transactions"; gap: 1.25rem; }
.dashboard .dash-grid > .panel:nth-child(1) { grid-area: account; }
.dashboard .dash-grid > .panel:nth-child(2) { grid-area: shortcuts; }
.dashboard .dash-grid > .panel:nth-child(3) { grid-area: stats; }
.dashboard .dash-grid > .panel:nth-child(4) { grid-area: transactions; }
.dashboard .balance { border: 0; border-radius: var(--ui-radius-lg); background: linear-gradient(135deg, var(--ui-brand), #6657c9) !important; box-shadow: 0 14px 28px rgba(65,105,216,.22); }
.dashboard .dash-grid .row small { display: inline-flex; width: fit-content; padding: .2rem .45rem; border-radius: 999px; background: #ecfdf5; color: #15803d; font-size: .6875rem; font-weight: 700; }

.home-announcement, .announcement-dialog { border-radius: var(--ui-radius-lg) !important; background: #fff !important; box-shadow: var(--ui-shadow-sm) !important; }
.service-breadcrumb, .child-products-breadcrumb a, .order-back { border-radius: var(--ui-radius-md) !important; box-shadow: var(--ui-shadow-sm) !important; }
.site-footer { background: linear-gradient(145deg, #fff, #f8fafc) !important; border-top: 1px solid var(--ui-line) !important; }

@media (min-width: 48rem) {
  .home-product-grid, .product-grid, .child-products-grid, .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 64rem) {
  .home-product-grid, .product-grid, .child-products-grid, .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 57rem) {
  .site-header { height: 4.5rem; min-height: 4.5rem; }
  .site-nav { display: none !important; }
  .mobile-menu-wrapper { position: relative; display: block; flex: 0 0 auto; }
  .hamburger { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 0; border-radius: var(--ui-radius-md); background: #eef2ff; color: var(--ui-brand); cursor: pointer; }
}
@media (max-width: 47.99rem) {
  .section, .page-title, .detail, .dashboard, .products, .auth, .store-container, .services-container, .orders-container, .order-detail-container, .child-products-page .store-container { width: calc(100% - 2rem); }
  .dashboard .dash-head { align-items: flex-start; flex-direction: column; }
  .dashboard .balance { width: 100%; }
  .dashboard .dash-grid { grid-template-columns: 1fr; grid-template-areas: "account" "shortcuts" "stats" "transactions"; }
  .home-product-image, .product-card__image { min-height: 8.5rem; }
  .home-product-body, .product-card__body, .product-card .card-body { padding: .75rem !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Restrained falling-leaf layer: decorative only, never blocks interaction. */
.falling-leaves {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.falling-leaf {
  position: absolute;
  top: -12vh;
  left: var(--leaf-left);
  width: 13px;
  height: 19px;
  border-radius: 85% 12% 85% 12%;
  background: linear-gradient(135deg, #c08a45 0%, #e2b765 52%, #8f5d2e 100%);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .2);
  opacity: .34;
  transform: rotate(35deg) scale(var(--leaf-scale));
  animation: falling-leaf-drop var(--leaf-duration) linear var(--leaf-delay) infinite;
}

.falling-leaf::before {
  position: absolute;
  top: 2px;
  left: 6px;
  width: 1px;
  height: 15px;
  background: rgba(82, 47, 20, .48);
  content: '';
  transform: rotate(-24deg);
  transform-origin: bottom center;
}

@keyframes falling-leaf-drop {
  0% { transform: translate3d(0, -12vh, 0) rotate(25deg) scale(var(--leaf-scale)); }
  50% { transform: translate3d(calc(var(--leaf-drift) * -.35), 52vh, 0) rotate(calc(var(--leaf-rotation) * .5)) scale(var(--leaf-scale)); }
  100% { transform: translate3d(var(--leaf-drift), 118vh, 0) rotate(var(--leaf-rotation)) scale(var(--leaf-scale)); }
}

@media (max-width: 640px) {
  .falling-leaf { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .falling-leaves { display: none; }
}

/* Announcement popup: generic header/footer rules must not introduce white bands. */
.announcement-dialog,
.announcement-dialog-header,
.announcement-dialog-body,
.announcement-dialog-footer {
  background: linear-gradient(145deg, rgba(19, 30, 51, .98), rgba(14, 22, 39, .98)) !important;
  color: #dbe6f6 !important;
}

.announcement-dialog-header {
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}

.announcement-dialog-footer {
  border-top-color: rgba(148, 163, 184, .18) !important;
}

.announcement-dialog-title {
  color: #f1f5f9 !important;
}

.announcement-dialog-body,
.announcement-dialog-body p,
.announcement-dialog-body li {
  color: #c7d4e8 !important;
}

.announcement-dialog-body a {
  color: #82adff !important;
}

.announcement-close {
  background: rgba(51, 65, 85, .72) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #c7d4e8 !important;
}

.announcement-dialog-close-button {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

/* Click/tap splash feedback. It is fixed and pointer-transparent. */
@keyframes ui-click-spark {
  0% { opacity: .7; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(5px) scale(.7); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(25px) scale(0); }
}

.ui-click-spark {
  position: fixed;
  z-index: 9999;
  width: 4px;
  height: 12px;
  border-radius: 999px;
  background: #9ec0ff;
  box-shadow: 0 0 9px rgba(79, 140, 255, .7);
  pointer-events: none;
  animation: ui-click-spark .62s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ui-click-spark { display: none; }
}

/* Seasonal event particles. The layer is decorative and never blocks interaction. */
.seasonal-effects {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.seasonal-particle {
  position: absolute;
  top: -12vh;
  left: var(--particle-left);
  opacity: .36;
  animation: seasonal-particle-drop var(--particle-duration) linear var(--particle-delay) infinite;
}

.seasonal-particle--leaf,
.seasonal-particle--blossom,
.seasonal-particle--petal {
  width: 13px;
  height: 19px;
  border-radius: 85% 12% 85% 12%;
  background: linear-gradient(135deg, #c08a45, #e2b765 52%, #8f5d2e);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .2);
}

.seasonal-particle--blossom,
.seasonal-particle--petal {
  width: 11px;
  height: 15px;
  border-radius: 85% 15% 85% 15%;
  background: linear-gradient(135deg, #ffb8d2, #f06b9f 70%, #bd3f72);
}

.seasonal-particle--rain {
  width: 2px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(#9ecbff, rgba(79, 140, 255, .05));
  opacity: .22;
}

.seasonal-particle--snow {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e8f2ff;
  box-shadow: 0 0 12px rgba(158, 192, 255, .65);
  opacity: .6;
}

.seasonal-particle--confetti {
  width: 7px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(#4f8cff, #8daeff);
  opacity: .55;
}

.seasonal-particle--firework,
.seasonal-particle--sparkle {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd978;
  box-shadow: 0 0 14px 4px rgba(255, 217, 120, .5);
  opacity: .65;
}

.seasonal-particle--lantern {
  width: 10px;
  height: 15px;
  border-radius: 45% 45% 35% 35%;
  background: linear-gradient(90deg, #e56f3d, #ffd27a, #e56f3d);
  box-shadow: 0 0 12px rgba(255, 170, 83, .5);
  opacity: .58;
}

.seasonal-particle--halloween {
  width: 16px;
  height: 9px;
  border-radius: 50% 50% 45% 45%;
  background: #7b6cff;
  box-shadow: 0 0 12px rgba(123, 108, 255, .4);
  opacity: .5;
}

.seasonal-particle--halloween::before,
.seasonal-particle--halloween::after {
  position: absolute;
  top: 1px;
  width: 9px;
  height: 8px;
  border-radius: 80% 10% 80% 10%;
  background: inherit;
  content: '';
}

.seasonal-particle--halloween::before { right: 10px; transform: rotate(-28deg); }
.seasonal-particle--halloween::after { left: 10px; transform: rotate(28deg); }

@keyframes seasonal-particle-drop {
  0% { transform: translate3d(0, -12vh, 0) rotate(25deg) scale(var(--particle-scale)); }
  50% { transform: translate3d(calc(var(--particle-drift) * -.35), 52vh, 0) rotate(calc(var(--particle-rotation) * .5)) scale(var(--particle-scale)); }
  100% { transform: translate3d(var(--particle-drift), 118vh, 0) rotate(var(--particle-rotation)) scale(var(--particle-scale)); }
}

@media (max-width: 640px) {
  .seasonal-particle { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-effects { display: none; }
}

/* Premium polish pass */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.site-header { padding-inline: max(1rem, calc((100% - 77.5rem) / 2)); }
.site-logo { letter-spacing: -.045em; }
.site-nav { gap: .25rem; }
.site-nav > a, .nav-trigger { font-size: .8125rem; font-weight: 700; }
.account-trigger { box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.home-products { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.category-section-heading { margin-bottom: 1.25rem; }
.category-heading-main h2 { color: var(--ui-ink) !important; font-size: clamp(1.125rem, 2vw, 1.5rem); letter-spacing: -.035em; }
.category-heading-rule { background: #e2e8f0 !important; }
.category-view-all { padding: .35rem .65rem; border: 1px solid var(--ui-line); border-radius: .75rem; background: #fff; box-shadow: var(--ui-shadow-sm); }
.category-view-all:hover { border-color: #c7d2fe; transform: translateY(-1px); box-shadow: var(--ui-shadow-md); }
.home-announcement { margin-bottom: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--ui-radius-lg) !important; }
.home-announcement h2 { font-size: 1.125rem; letter-spacing: -.02em; }
.home-product-card, .product-card { transition: transform .28s cubic-bezier(.22,.8,.25,1), box-shadow .28s ease, border-color .28s ease; }
.home-product-image, .product-card__image { aspect-ratio: 4 / 3; }
.home-product-image img, .product-card__image img { transition: transform .45s cubic-bezier(.22,.8,.25,1), filter .45s ease; }
.home-product-card:hover img, .product-card:hover .product-card__image img { transform: scale(1.035); filter: saturate(1.06); }
.home-product-category, .product-card__category { color: var(--ui-brand) !important; font-weight: 800; letter-spacing: .1em; }
.home-product-stats, .product-card__meta { color: var(--ui-muted); }
.home-product-stats b, .product-card__meta span { color: #475569; }
.site-footer { margin-top: 2rem; }

/* VIP navy theme trial: depth and contrast without adding new page blocks. */
:root { --vip-bg: #070b14; --vip-surface: #0e1627; --vip-surface-raised: #131e33; --vip-line: rgba(148,163,184,.16); --vip-text: #f1f5f9; --vip-muted: #94a3b8; --vip-accent: #4f8cff; }
html, body { background: var(--vip-bg) !important; color: var(--vip-text) !important; }
body::before { display: block !important; background: radial-gradient(circle at 12% -12%, rgba(37,99,235,.25), transparent 28%), radial-gradient(circle at 96% 16%, rgba(30,64,175,.18), transparent 25%) !important; }
.site-header { background: rgba(7,11,20,.88) !important; border-bottom-color: var(--vip-line) !important; box-shadow: 0 12px 30px rgba(0,0,0,.26) !important; }
.site-logo .logo { color: var(--vip-text) !important; }
.site-nav > a, .nav-trigger { color: #b5c0d2 !important; }
.site-nav > a:hover, .nav-trigger:hover { color: #fff !important; background: rgba(79,140,255,.12) !important; }
.dropdown, .account-panel, .mobile-nav-dropdown { background: #10192b !important; border-color: var(--vip-line) !important; box-shadow: 0 18px 42px rgba(0,0,0,.38) !important; }
.dropdown a, .account-panel a, .account-panel button, .mobile-nav-item, .mobile-products-toggle, .mobile-products-submenu a { color: #b8c4d8 !important; }
.account-trigger { background: #10192b !important; border-color: var(--vip-line) !important; color: #e2e8f0 !important; }
.section, .page-title, .detail, .dashboard, .products, .auth, .store-page, .services-page, .orders-page, .order-detail-page { background: transparent !important; }
.card, .panel, .form, .auth-card, .auth-face, .product-card, .service-card, .service-detail-card, .service-order-detail-card, .orders-stat-card, .orders-filter, .orders-table-card, .order-detail-card, .deposit-create-card, .deposit-history-card, .announcement-dialog { background: linear-gradient(145deg, rgba(19,30,51,.96), rgba(14,22,39,.96)) !important; border-color: var(--vip-line) !important; box-shadow: 0 18px 45px rgba(0,0,0,.22) !important; }
.panel:hover, .card:hover, .product-card:hover, .service-card:hover { border-color: rgba(79,140,255,.46) !important; box-shadow: 0 22px 52px rgba(0,0,0,.35) !important; }
.home-product-image, .product-card__image, .service-card__image { background: #0b1220 !important; }
.home-product-body, .product-card__body, .product-card .card-body, .service-card__body { background: transparent !important; }
.home-product-body h3, .product-card .product-card__name, .service-card h2 a, .service-detail-card__content h1, .service-order-detail-card h1, .category-heading-main h2 { color: var(--vip-text) !important; }
.home-product-stats, .product-card__meta, .muted, .lead, .row small { color: var(--vip-muted) !important; }
.home-product-stats b, .product-card__meta span, .row b, .row strong { color: #dbe6f6 !important; }
.home-product-price, .product-card .product-card__price, .price, .meta strong { color: #74a7ff !important; }
.category-product-section { background: linear-gradient(145deg, rgba(14,22,39,.84), rgba(10,16,29,.84)) !important; border-color: var(--vip-line) !important; box-shadow: none !important; }
.category-heading-rule, .home-product-stats { border-color: rgba(148,163,184,.13) !important; background-color: rgba(148,163,184,.13) !important; }
.home-announcement { background: linear-gradient(135deg, rgba(20,31,53,.96), rgba(13,21,37,.96)) !important; border-color: rgba(79,140,255,.25) !important; box-shadow: 0 16px 36px rgba(0,0,0,.2) !important; }
.home-announcement h2 { color: #f1f5f9 !important; }
.home-announcement__body { color: #b8c4d8 !important; }
.btn, .service-button, .orders-button { background: #17233b; color: #eaf1ff; border-color: rgba(148,163,184,.16); box-shadow: none; }
.primary, .service-button--primary, .orders-button--primary { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(37,99,235,.25) !important; }
.secondary, .service-button--ghost, .orders-button--ghost { background: rgba(79,140,255,.10) !important; border-color: rgba(79,140,255,.25) !important; color: #a9c6ff !important; }
.form input, .form select, .form textarea, .panel input, .panel select, .panel textarea, .auth-form input, .orders-filter input, .orders-filter select { background: #0a1120 !important; color: #eaf1ff !important; border-color: rgba(148,163,184,.23) !important; }
.dashboard .balance { background: linear-gradient(145deg, #12347a, #0f2453) !important; box-shadow: 0 18px 34px rgba(0,0,0,.28) !important; }
.dashboard .dash-grid .row small { background: rgba(16,185,129,.12); color: #6ee7b7; }
.site-footer { background: #060a12 !important; border-top-color: var(--vip-line) !important; }
.footer-logo, .footer-logo .logo, .footer-column-title { color: #eaf1ff !important; }
.footer-links a, .footer-brand p, .footer-bottom { color: #93a3bb !important; }
.page-title h1, .detail h1, .dashboard h1, .panel h2, .form h2, .qr h1, .orders-heading h1, .orders-table-header h2 { color: #f1f5f9 !important; }
.dashboard .eyebrow, .orders-kicker, .services-eyebrow { color: #76a8ff !important; }
.dashboard .lead, .dashboard .muted, .dashboard p, .panel label, .deposit-create-card label { color: #94a3b8 !important; }
.row { border-top-color: rgba(148,163,184,.14) !important; }
.deposit-method-switch { border-color: var(--vip-line) !important; background: #0b1220 !important; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.deposit-method-tab { color: #8292aa !important; }
.deposit-method-tab[aria-selected="true"] { background: #172746 !important; color: #9ec0ff !important; box-shadow: 0 6px 16px rgba(0,0,0,.25) !important; }
.deposit-qr-frame { border-color: var(--vip-line) !important; background: #0a1120 !important; }
.deposit-transfer-info, .deposit-result, .deposit-success-state, .deposit-cancelled-state { border-color: var(--vip-line) !important; background: #111c30 !important; color: #cbd5e1 !important; }
.deposit-transfer-info > span, .deposit-transfer-info b, .deposit-success-label { color: #9ec0ff !important; }
.deposit-status-badge--completed { background: rgba(16,185,129,.14) !important; color: #6ee7b7 !important; }
.deposit-status-badge--pending { background: rgba(245,158,11,.14) !important; color: #fcd34d !important; }
.deposit-status-badge--cancelled, .deposit-status-badge--expired { background: rgba(148,163,184,.14) !important; color: #cbd5e1 !important; }
.card-deposit-panel, .card-choice, .card-deposit-history, .card-confirm-dialog { background: #0e1627 !important; border-color: var(--vip-line) !important; }
.card-choice { color: #cbd5e1 !important; }
.card-choice:has(input:checked) { background: #172746 !important; border-color: #4f8cff !important; color: #dbeafe !important; }
.card-input-field, .card-deposit-fieldset legend, .card-section-title h3 { color: #cbd5e1 !important; }

.category-product-section { padding:1.5rem; border:1px solid #edf0f5; border-radius:1.5rem; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 4px 18px rgba(15,23,42,.035); }
.category-product-section + .category-product-section { margin-top:1.5rem; }
.category-section-heading { margin-bottom:1.25rem; }
.home-product-grid { gap:1rem; }
.home-product-card { border-radius:1rem !important; box-shadow:0 3px 12px rgba(15,23,42,.055) !important; }
.home-product-card:hover { box-shadow:0 16px 30px rgba(15,23,42,.13) !important; }
.home-product-body { padding:1rem !important; }
.home-product-body h3 { font-size:.9375rem; }
.home-product-price { font-size:1.125rem; }
.home-product-stats { margin-top:.75rem; }
@media (max-width: 47.99rem) { .category-product-section { padding:1rem; border-radius:1.125rem; } .category-product-section + .category-product-section { margin-top:1rem; } }

/* Auth surfaces: premium navy, readable contrast, and a real tactile flip. */
.auth-shell {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 4.5rem) !important;
  padding: clamp(2rem, 7vh, 5rem) 1rem 4rem !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(48, 91, 190, .22), transparent 28%),
    radial-gradient(circle at 86% 76%, rgba(32, 61, 126, .18), transparent 30%),
    #070b14 !important;
  perspective: 1400px;
}

.auth-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255,255,255,.035), transparent 42%, rgba(79,140,255,.035));
  content: '';
  pointer-events: none;
}

.auth-card {
  width: min(100%, 31rem) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 1.45rem !important;
  background: linear-gradient(145deg, rgba(19,30,51,.98), rgba(10,17,31,.98)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(79,140,255,.08) inset !important;
  transform-style: preserve-3d;
  will-change: transform;
}

.auth-content { width: 100%; }

/* The auth form is content inside the auth card, not a second nested card. */
.auth-form {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auth-face {
  min-height: 0 !important;
  padding: clamp(1.45rem, 4vw, 2.35rem) !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  backface-visibility: visible;
}

.auth-face h1,
.auth-form h2 { color: #f8fafc !important; }
.auth-face h1 { margin: .45rem 0 .65rem !important; font-size: clamp(2.15rem, 5vw, 3rem) !important; letter-spacing: -.055em !important; }
.auth-face .eyebrow { color: #76a8ff !important; }
.auth-note, .auth-form p, .auth-form .field-help { color: #9aaac0 !important; }
.auth-form label { color: #dce6f5 !important; }
.auth-form input {
  min-height: 3.05rem !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  border-radius: .85rem !important;
  background: #080f1e !important;
  color: #f8fafc !important;
  caret-color: #76a8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.auth-form input::placeholder { color: #64748b !important; }
.auth-form input:focus { border-color: #5d95ff !important; outline: 3px solid rgba(79,140,255,.18) !important; }
.auth-form p a, .auth-referral-note a { color: #76a8ff !important; }
.auth-referral-note { border-color: rgba(79,140,255,.26) !important; background: rgba(36,73,145,.16) !important; color: #b7c8e2 !important; }
.auth-form .error { border-color: rgba(248,113,113,.35) !important; background: rgba(127,29,29,.22) !important; color: #fecaca !important; }
.auth-form .btn.primary {
  min-height: 3.15rem !important;
  border-radius: .85rem !important;
  background: linear-gradient(135deg, #4f8cff, #315ed1) !important;
  box-shadow: 0 12px 28px rgba(37,99,235,.28) !important;
}
.auth-form .btn.primary:hover { box-shadow: 0 16px 34px rgba(37,99,235,.4) !important; transform: translateY(-2px); }
.auth-form .btn.primary:active { transform: translateY(1px) scale(.985); }

@media (max-width: 34rem) {
  .auth-shell { padding: 1.5rem .75rem 3rem !important; }
  .auth-card { border-radius: 1.2rem !important; }
  .auth-face { padding: 1.35rem 1.1rem 1.5rem !important; }
  .auth-face h1 { font-size: 2.05rem !important; }
}

/* Services page: prevent the generic header rule from creating a white strip. */
.services-page { background: transparent !important; }
.services-page .services-heading {
  margin-bottom: 1.75rem !important;
  padding: 0 0 1.15rem !important;
  border-bottom-color: rgba(148,163,184,.16) !important;
  background: transparent !important;
}
.services-page .service-page-title {
  color: #f8fafc !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  letter-spacing: -.045em !important;
}
.services-page .service-card {
  border-color: var(--vip-line) !important;
  background: linear-gradient(145deg, rgba(19,30,51,.97), rgba(14,22,39,.97)) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}
.services-page .service-card__body { background: transparent !important; }
.services-page .service-card h2 a { color: #f1f5f9 !important; }
.services-page .service-card p { color: #94a3b8 !important; }
.services-page .service-card__footer strong { color: #74a7ff !important; }
.services-page .service-card__status { background: rgba(16,185,129,.14) !important; color: #6ee7b7 !important; }
.services-page .service-book-trigger { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff !important; }
.services-page .services-empty,
.services-page .service-detail-card,
.services-page .service-order-detail-card,
.services-page .service-modal__dialog { background: linear-gradient(145deg, rgba(19,30,51,.97), rgba(14,22,39,.97)) !important; border-color: var(--vip-line) !important; }
.services-page .service-detail-card__content h1,
.services-page .service-order-detail-card header h1,
.services-page .service-modal__dialog h2,
.services-page .services-empty h2 { color: #f1f5f9 !important; }
.services-page .service-detail-description,
.services-page .services-empty p,
.services-page .service-modal__intro { color: #94a3b8 !important; }

/* The booking modal is mounted at document level, outside .services-page. */
.service-modal { background: rgba(2,6,23,.78) !important; backdrop-filter: blur(10px); }
.service-modal__dialog {
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 1.35rem !important;
  background: linear-gradient(145deg, #131e33, #0e1627) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.5) !important;
  color: #f1f5f9 !important;
}
.service-modal__step { background: transparent !important; }
.service-modal__eyebrow { color: #76a8ff !important; font-weight: 800; letter-spacing: .12em; }
.service-modal__dialog h2 { color: #f8fafc !important; }
.service-modal__intro { color: #9aaac0 !important; }
.service-modal__close { border: 1px solid rgba(148,163,184,.18) !important; background: rgba(51,65,85,.55) !important; color: #cbd5e1 !important; }
.service-modal__close:hover { background: rgba(79,140,255,.2) !important; color: #fff !important; }
.service-question { color: #dce6f5 !important; }
.service-question small { color: #94a3b8 !important; }
.service-question input,
.service-question textarea,
.service-question select {
  border-color: rgba(148,163,184,.25) !important;
  background: #080f1e !important;
  color: #f8fafc !important;
}
.service-question input::placeholder,
.service-question textarea::placeholder { color: #64748b !important; }
.service-question input:focus,
.service-question textarea:focus,
.service-question select:focus { outline: 3px solid rgba(79,140,255,.2) !important; border-color: #5d95ff !important; }
.service-choice { border-color: rgba(148,163,184,.22) !important; background: #10192b !important; color: #cbd5e1 !important; }
.service-form-error { border-color: rgba(248,113,113,.35) !important; background: rgba(127,29,29,.22) !important; color: #fecaca !important; }
.service-confirm-summary div,
.service-confirm-answer { border-color: rgba(148,163,184,.18) !important; background: rgba(8,15,30,.55) !important; }
.service-confirm-summary span,
.service-confirm-answer span { color: #94a3b8 !important; }
.service-confirm-summary strong,
.service-confirm-answer strong { color: #f1f5f9 !important; }
.service-modal__actions .service-button--ghost { border-color: rgba(148,163,184,.22) !important; background: rgba(51,65,85,.55) !important; color: #dbeafe !important; }
.service-modal__actions .service-button--primary { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff !important; }

/* Purchase confirmation and delivery dialogs are mounted outside the page card. */
.purchase-modal { background: rgba(2,6,23,.78) !important; backdrop-filter: blur(10px); }
.purchase-dialog {
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 1.35rem !important;
  background: linear-gradient(145deg, #131e33, #0e1627) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.5) !important;
  color: #f1f5f9 !important;
}
.purchase-dialog h2 { color: #f8fafc !important; }
.purchase-dialog p { color: #b8c4d8 !important; }
.purchase-close { color: #b8c4d8 !important; }
.purchase-close:hover { color: #fff !important; }
.purchase-summary {
  border-color: rgba(148,163,184,.2) !important;
  background: rgba(8,15,30,.58) !important;
}
.purchase-summary p { border-bottom-color: rgba(148,163,184,.16) !important; }
.purchase-summary span { color: #94a3b8 !important; }
.purchase-summary b { color: #f1f5f9 !important; }
.purchase-error { border: 1px solid rgba(248,113,113,.35) !important; background: rgba(127,29,29,.22) !important; color: #fecaca !important; }
.purchase-actions .secondary,
.purchase-dialog .btn.secondary { background: rgba(51,65,85,.6) !important; border-color: rgba(148,163,184,.24) !important; color: #dbeafe !important; }
.purchase-actions .primary,
.purchase-dialog .btn.primary { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff !important; }
.delivery-item { border-color: rgba(148,163,184,.2) !important; background: rgba(8,15,30,.58) !important; }
.delivery-item code { color: #dbeafe !important; }

/* Product listing page: the title is a header element, so neutralise the legacy white header fill. */
.store-page { background: transparent !important; }
.store-page .store-heading {
  padding: 2.5rem 0 1.35rem !important;
  border-bottom: 1px solid rgba(148,163,184,.16) !important;
  background: transparent !important;
}
.store-page .category-title {
  margin: 0 !important;
  color: #f8fafc !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  letter-spacing: -.045em !important;
}
.site-header .dropdown a.active {
  background: rgba(79,140,255,.18) !important;
  color: #dbeafe !important;
  box-shadow: inset 3px 0 0 #4f8cff;
}

/* Dashboard specificity fix: the legacy light-theme rule targets panels more specifically. */
.dashboard .dash-grid > .panel {
  background: linear-gradient(145deg, rgba(19,30,51,.97), rgba(14,22,39,.97)) !important;
  border-color: var(--vip-line) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.24) !important;
  color: #dbe6f6 !important;
}
.dashboard .dash-grid > .panel h2 { color: #f1f5f9 !important; }
.dashboard .dash-grid > .panel .row { border-top-color: rgba(148,163,184,.14) !important; }
.dashboard .dash-grid > .panel .row > span { color: #94a3b8 !important; }
.dashboard .dash-grid > .panel .row b,
.dashboard .dash-grid > .panel .row strong { color: #dbe6f6 !important; }
.dashboard .dash-grid > .panel .stat span { color: #94a3b8 !important; }
.dashboard .dash-grid > .panel p.muted { color: #94a3b8 !important; }