/* Mufy Liquid: transparent liquid glass variant around the rounded M logo. */
@import url("https://fonts.googleapis.com/css2?family=Chivo:wght@600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap");

:root {
  --bg: #f8f6ff;
  --panel: rgba(255, 255, 255, .46);
  --panel-strong: rgba(255, 255, 255, .72);
  --ink: #151224;
  --muted: #746f8b;
  --line: rgba(109, 88, 255, .18);
  --soft: rgba(109, 88, 255, .09);
  --green: #6b57ff;
  --mint: #9b89ff;
  --coral: #ff85a0;
  --amber: #ffc96b;
  --bad: #ee5574;
  --ok: #45a870;
  --shadow: 0 30px 90px rgba(73, 54, 170, .18);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

body {
  color: var(--ink);
  overflow-x: hidden;
  background:
    radial-gradient(700px 500px at 12% 8%, rgba(107, 87, 255, .28), transparent 66%),
    radial-gradient(620px 440px at 82% 18%, rgba(255, 133, 160, .22), transparent 62%),
    radial-gradient(760px 520px at 52% 92%, rgba(155, 137, 255, .16), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f2eeff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: -12%;
  pointer-events: none;
  opacity: .22;
  background:
    url("./assets/mufy_logo_rounded_transparent.png") no-repeat right -90px top -120px / min(54vw, 660px),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .8), transparent 28%),
    radial-gradient(circle at 68% 64%, rgba(107, 87, 255, .4), transparent 34%);
  filter: saturate(1.05);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(107, 87, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 87, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .42;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 72%);
}

.app-shell {
  width: min(1180px, calc(100% - 34px));
  margin-top: 16px;
  animation: liquidPageIn .72s cubic-bezier(.2, .8, .2, 1) both;
}

.topbar,
.panel,
.product-card,
.toolbar,
.summary div,
.status-line,
.delivery-card,
.stat-card,
.table-wrap,
.admin-side {
  border: 1px solid rgba(255, 255, 255, .58);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .28)),
    rgba(255, 255, 255, .34);
  box-shadow:
    0 18px 54px rgba(73, 54, 170, .13),
    0 1px 0 rgba(255, 255, 255, .8) inset;
  backdrop-filter: blur(14px) saturate(1.08);
}

.panel,
.purchase-modal,
.product-card,
.toolbar {
  isolation: isolate;
}

.panel::before,
.purchase-modal::before,
.product-card::before,
.toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .24));
}

.panel,
.product-card,
.toolbar {
  position: relative;
}

.topbar {
  top: 14px;
  border-radius: 999px;
  padding: 12px 14px;
  animation: liquidDrop .58s cubic-bezier(.2, .8, .2, 1) .08s both;
}

.brand {
  color: var(--ink);
  font-family: "Chivo", "Noto Sans SC", sans-serif;
  font-size: 24px;
  font-weight: 900;
}

.brand-mark {
  width: 42px;
  height: 42px;
  color: transparent;
  border-radius: 14px;
  background:
    url("./assets/mufy_logo_rounded_transparent.png") center / cover no-repeat,
    #6b57ff;
  box-shadow: 0 16px 36px rgba(107, 87, 255, .24);
}

.chip-mark {
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(145deg, #6b57ff, #9b89ff);
  box-shadow: 0 18px 40px rgba(107, 87, 255, .24);
}

.topnav a,
.nav-button,
.ghost-btn,
.primary-btn,
.segmented button,
.category-pill,
.admin-nav a,
.mini-btn,
.method-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .34);
  box-shadow: 0 8px 22px rgba(73, 54, 170, .07);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  backdrop-filter: blur(8px) saturate(1.05);
}

.topnav a::before,
.nav-button::before,
.ghost-btn::before,
.primary-btn::before,
.segmented button::before,
.admin-nav a::before,
.method-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .78), transparent 78%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}

.topnav a:hover::before,
.nav-button:hover::before,
.ghost-btn:hover::before,
.primary-btn:hover::before,
.segmented button:hover::before,
.admin-nav a:hover::before,
.method-card:hover::before {
  transform: translateX(120%);
}

.topnav a:hover,
.nav-button:hover,
.ghost-btn:hover,
.primary-btn:hover,
.segmented button:hover,
.admin-nav a:hover,
.mini-btn:hover,
.method-card:hover {
  transform: translateY(-2px);
  border-color: rgba(107, 87, 255, .28);
}

.topnav a.active,
.nav-button.active,
.primary-btn,
.segmented button.active,
.admin-nav a.active,
.method-card.active {
  color: #fff;
  border-color: rgba(255, 255, 255, .54);
  background: linear-gradient(135deg, rgba(107, 87, 255, .92), rgba(155, 137, 255, .88));
  box-shadow: 0 20px 48px rgba(107, 87, 255, .24);
}

.panel {
  border-radius: 30px;
}

.shop-hero {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-radius: 38px;
  color: #fff;
  background:
    radial-gradient(360px 280px at 82% 18%, rgba(255, 255, 255, .44), transparent 64%),
    radial-gradient(420px 360px at 66% 82%, rgba(255, 133, 160, .3), transparent 64%),
    linear-gradient(135deg, rgba(107, 87, 255, .96), rgba(126, 104, 255, .88) 55%, rgba(255, 136, 160, .82));
  box-shadow: 0 38px 110px rgba(107, 87, 255, .28);
  animation: liquidHeroIn .78s cubic-bezier(.2, .8, .2, 1) .12s both;
}

.shop-hero::before {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -125px;
  width: 450px;
  height: 450px;
  background: url("./assets/mufy_logo_rounded_transparent.png") center / contain no-repeat;
  opacity: .34;
  filter: drop-shadow(0 20px 42px rgba(0, 0, 0, .1));
}

.shop-hero::after {
  content: "";
  position: absolute;
  right: 108px;
  top: 70px;
  width: 138px;
  height: 138px;
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .16);
  transform: rotate(16deg);
  backdrop-filter: blur(8px) saturate(1.05);
}

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

.shop-hero h1,
.panel h1 {
  max-width: 820px;
  font-family: "Chivo", "Noto Sans SC", sans-serif;
  font-size: clamp(42px, 7vw, 88px);
  font-weight: 900;
  line-height: .98;
}

.admin-page .panel h1 {
  max-width: 720px;
  font-size: clamp(44px, 4.8vw, 70px);
}

.admin-stat-section h2 {
  color: #6f6a82;
}

.admin-page .stat-card {
  min-height: 104px;
}

.shop-hero h1,
.shop-hero p {
  color: #fff;
}

.shop-hero p {
  max-width: 650px;
  color: rgba(255, 255, 255, .8);
}

.eyebrow {
  min-height: 34px;
  padding: 0 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.hero-metrics div {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .18);
  box-shadow: none;
  animation: liquidMetric .54s cubic-bezier(.2, .8, .2, 1) both;
}

.hero-metrics div:nth-child(2) {
  animation-delay: .08s;
}

.hero-metrics div:nth-child(3) {
  animation-delay: .16s;
}

.hero-metrics strong,
.hero-metrics span {
  color: #fff;
}

.searchbox,
.field,
.select,
.textarea {
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 8px 22px rgba(73, 54, 170, .07);
  backdrop-filter: blur(7px) saturate(1.05);
}

.searchbox,
.field,
.select {
  border-radius: 999px;
}

.searchbox {
  min-width: clamp(300px, 30vw, 420px);
  padding: 0 18px;
}

.searchbox span {
  flex: 0 0 auto;
  white-space: nowrap;
  color: rgba(29, 26, 48, .74);
  font-weight: 700;
  letter-spacing: .08em;
}

.textarea {
  border-radius: 22px;
}

.field:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(107, 87, 255, .48);
  box-shadow: 0 0 0 4px rgba(107, 87, 255, .1);
}

.product-grid {
  gap: 18px;
  contain: layout;
}

.product-card {
  min-height: 330px;
  border-radius: 30px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  animation: liquidCard .58s cubic-bezier(.2, .8, .2, 1) both;
  content-visibility: auto;
  contain-intrinsic-size: 330px;
}

.product-grid.is-live-update .product-card {
  animation: none;
}

.product-card:nth-child(2) {
  animation-delay: .06s;
}

.product-card:nth-child(3) {
  animation-delay: .12s;
}

.product-card:nth-child(4) {
  animation-delay: .18s;
}

.product-card:hover {
  border-color: rgba(107, 87, 255, .26);
  box-shadow: 0 38px 94px rgba(107, 87, 255, .18);
  transform: translateY(-7px);
}

.product-card::after,
.product-visual::after {
  display: none;
}

.product-card h3 {
  font-family: "Chivo", "Noto Sans SC", sans-serif;
  font-size: 27px;
  font-weight: 900;
}

.product-card p,
.muted,
.summary span,
.table-sub {
  color: var(--muted);
}

.tag,
.badge {
  border: 1px solid rgba(107, 87, 255, .16);
  border-radius: 999px;
  color: #6f6a82;
  background: rgba(255, 255, 255, .4);
}

.badge.ok {
  color: #276d47;
  border-color: rgba(69, 168, 112, .28);
  background: rgba(69, 168, 112, .1);
}

.badge.warn {
  color: #8b6a27;
  border-color: rgba(255, 200, 97, .34);
  background: rgba(255, 200, 97, .14);
}

.badge.bad {
  color: #9b3854;
  border-color: rgba(238, 85, 116, .28);
  background: rgba(238, 85, 116, .1);
}

.price {
  color: #6b57ff;
  font-family: "Chivo", "Noto Sans SC", sans-serif;
  font-size: 34px;
  font-weight: 900;
}

.summary div:hover,
.status-line:hover,
.delivery-card:hover,
.stat-card:hover,
.customer-order-card:hover,
.user-order-card:hover,
.user-search-result:hover {
  border-color: rgba(107, 87, 255, .26);
  background: rgba(255, 255, 255, .66);
  transform: translateY(-2px);
}

.customer-order-card,
.user-order-card,
.user-search-result,
.admin-search-card,
.customer-profile-card,
.security-card,
.customer-side {
  border-color: rgba(107, 87, 255, .14);
  background: rgba(255, 255, 255, .52);
  box-shadow: 0 18px 42px rgba(73, 54, 170, .08);
}

.customer-center-nav button {
  color: #7e78a4;
  border-color: rgba(107, 87, 255, .12);
  background: rgba(255, 255, 255, .46);
}

.customer-center-nav button.active {
  color: #4d3fe0;
  border-color: rgba(107, 87, 255, .24);
  background:
    linear-gradient(135deg, rgba(107, 87, 255, .18), rgba(127, 242, 209, .18)),
    rgba(255, 255, 255, .62);
}

.account-copy-line code {
  color: #fff;
  background: linear-gradient(135deg, rgba(107, 87, 255, .92), rgba(155, 137, 255, .88));
}

.pay-card {
  grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
}

.pay-qr-column {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.qr-frame {
  width: min(100%, 430px);
  aspect-ratio: 1;
  padding: clamp(10px, 1.8vw, 16px);
  border-radius: 34px;
  background: #fff;
}

.qr-frame.has-qr {
  padding: clamp(10px, 1.4vw, 14px);
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(73, 54, 170, .12);
}

.qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 22px;
}

.qr-frame.qr-zoom-fallback img {
  width: 145%;
  height: 145%;
  object-fit: cover;
  transform: scale(1.08);
}

.qr-frame img.qr-trimmed {
  object-fit: contain;
  transform: none;
}

.copy-account-btn {
  color: #4d3fe0;
  border-color: rgba(107, 87, 255, .22);
  background: rgba(255, 255, 255, .58);
}

.product-visual {
  min-height: 440px;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .42), transparent 30%),
    linear-gradient(135deg, #6b57ff, #ff88a0);
}

.product-visual::before {
  inset: 46px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 34px;
  background:
    url("./assets/mufy_logo_rounded_transparent.png") center / min(78%, 340px) no-repeat,
    rgba(255, 255, 255, .12);
  backdrop-filter: blur(7px);
}

th {
  color: #4d3fe0;
  background: rgba(107, 87, 255, .08);
}

.toast {
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #6b57ff, #9b89ff);
  box-shadow: 0 14px 38px rgba(107, 87, 255, .2);
}

.modal-backdrop {
  background:
    radial-gradient(520px 380px at 30% 20%, rgba(107, 87, 255, .26), transparent 68%),
    rgba(18, 15, 32, .42);
  backdrop-filter: blur(7px) saturate(1.04);
}

.purchase-modal {
  border-color: rgba(255, 255, 255, .62);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .34)),
    rgba(255, 255, 255, .42);
  box-shadow:
    0 24px 72px rgba(73, 54, 170, .22),
    0 1px 0 rgba(255, 255, 255, .86) inset;
  backdrop-filter: blur(12px) saturate(1.08);
}

.purchase-modal h1 {
  max-width: calc(100% - 54px);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.08;
}

.auth-footer {
  border-color: rgba(107, 87, 255, .14);
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 14px 34px rgba(73, 54, 170, .08);
}

.auth-footer strong,
.auth-switch-text button {
  color: #4d3fe0;
}

.modal-close {
  color: #fff;
  border-color: rgba(255, 255, 255, .54);
  background: linear-gradient(135deg, rgba(107, 87, 255, .92), rgba(155, 137, 255, .86));
}

@keyframes liquidPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes liquidDrop {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes liquidHeroIn {
  from { opacity: 0; transform: translateY(18px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes liquidMetric {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes liquidCard {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes liquidBackdrop {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-30px, 24px, 0) scale(1.06); }
}

@keyframes liquidLogoFloat {
  from { transform: translateY(0) rotate(-6deg); }
  to { transform: translateY(-24px) rotate(4deg); }
}

@keyframes liquidTile {
  from { transform: translateY(0) rotate(16deg); }
  to { transform: translateY(-18px) rotate(8deg); }
}

@keyframes liquidVisualFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-18px) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 920px) {
  .shop-hero {
    min-height: 480px;
  }

  .pay-card {
    grid-template-columns: 1fr;
  }

  .qr-frame {
    width: min(100%, 460px);
  }
}

@media (max-width: 640px) {
  body::before {
    background-size: 520px, auto, auto;
    background-position: right -210px top -80px, 0 0, 0 0;
  }

  .app-shell {
    width: min(100% - 22px, 1180px);
  }

  .shop-hero {
    min-height: 540px;
    border-radius: 28px;
  }

  .shop-hero::before {
    right: -190px;
    bottom: -150px;
    width: 390px;
    height: 390px;
  }

  .shop-hero::after {
    right: 28px;
    top: auto;
    bottom: 42px;
    width: 104px;
    height: 104px;
  }

  .shop-hero h1,
  .panel h1 {
    font-size: 42px;
  }
}