/* MixLivo order and after-sales help: HTML/CSS only. */
html#guide-appearance-preview { scroll-behavior: smooth; }
.mix-orders-support { padding-top: 54px; }
.mix-orders-support .mix-section-heading { margin-bottom: 22px; }
.mix-orders-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; grid-auto-rows: 1fr; }
.mix-orders-support-grid > article {
  min-width: 0;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  gap: 16px;
  border: 1px solid #e5dfd3;
  border-radius: 16px;
  background: #fffdf8;
}
.mix-orders-support-grid h3 { font-size: 21px; line-height: 1.4; }
.mix-orders-support-grid p { font-size: 14px; line-height: 1.8; }
.mix-orders-support-grid .mix-button { margin-top: 0; align-self: flex-start; }
.mix-support-card-kicker { font-size: 12px; font-weight: 650; letter-spacing: .08em; color: #6650cb; }
html#guide-appearance-preview body.mixlivo-store #human-assistance {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 88px;
  border-color: #ded7f5 !important;
  background: linear-gradient(145deg, #f8f5ff, #fffdf8);
  text-align: center;
}

html#guide-appearance-preview body.mixlivo-store #human-assistance .human-assistance-qr { width: 196px; height: 196px; padding: 8px; align-self: center; overflow: hidden; border: 0 !important; border-radius: 16px; background: #fff !important; box-shadow: 0 4px 18px #6650cb12; }
#human-assistance .human-assistance-qr img { display: block; width: 100%; height: 100%; border-radius: 9px; object-fit: cover; object-position: 50% 65%; }
html#guide-appearance-preview body.mixlivo-store #human-assistance .human-assistance-qq { display: flex; align-self: center; justify-content: center; align-items: baseline; gap: 8px; line-height: 1.4; white-space: nowrap; }
html#guide-appearance-preview body.mixlivo-store #human-assistance .human-assistance-qq small { font-size: 12px; font-weight: 500; color: #736885 !important; }
html#guide-appearance-preview body.mixlivo-store #human-assistance .human-assistance-qq strong { font-size: 21px; font-weight: 700; color: #27213b !important; }
html#guide-appearance-preview body.mixlivo-store #human-assistance .human-assistance-note { align-self: center; font-size: 13px; text-align: center; line-height: 1.7; color: #736885 !important; }
html#guide-appearance-preview body.mixlivo-store #human-assistance::after { content: ""; position: absolute; inset: 0; border: 2px solid #7953d2 !important; border-radius: inherit; pointer-events: none; opacity: 0; }
#human-assistance:target::after { animation: mix-support-target 1.5s ease-out; }
@keyframes mix-support-target { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.mix-support-float {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 54px;
  height: 66px;
  border: 1px solid #ffffff45;
  border-radius: 16px;
  background: #6650cb;
  color: #fff;
  box-shadow: 0 6px 20px #39257526;
  font: 600 12px/1.2 system-ui, sans-serif;
  text-decoration: none;
}
.mix-support-float:hover { background: #5541b2; }
.mix-support-float:focus-visible { outline: 3px solid #a894e7; outline-offset: 3px; }
html#guide-appearance-preview body .mix-support-float,html#guide-appearance-preview body .mix-support-float span { color: #fff !important; }
html#guide-appearance-preview.dark body.mixlivo-store .mix-orders-support-grid > article { background: #211f29; border-color: #49414f; }
html#guide-appearance-preview.dark body.mixlivo-store #human-assistance { background: linear-gradient(145deg, #272135, #201e28); border-color: #55466d !important; }
html#guide-appearance-preview.dark body.mixlivo-store #human-assistance .human-assistance-qq strong { color: #d8c7ff !important; }
html#guide-appearance-preview.dark body.mixlivo-store #human-assistance .human-assistance-note { color: #b8acc7 !important; }
@media (max-width: 767px) {
  .mix-orders-support-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mix-orders-support-grid > article { min-height: 260px; padding: 24px; }
  html#guide-appearance-preview body.mixlivo-store #human-assistance { min-height: 360px; }
  .mix-support-float { right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); width: 40px; height: 62px; border-radius: 14px 0 0 14px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { html#guide-appearance-preview { scroll-behavior: auto; } }
