.mys-vitrin { position: relative; min-width: 0; }
.mys-vitrin .scene {
  position: relative; height: 548px; perspective: 1400px;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;
}
.mys-vitrin .scene::after {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  left: var(--mx, 58%); top: var(--my, 42%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(225,6,0,.34), transparent 68%);
  filter: blur(10px); pointer-events: none; z-index: 0;
}
.mys-vitrin .halo {
  position: absolute; width: 78%; height: 160px; bottom: 36px; border-radius: 50%;
  background: rgba(225,6,0,.22); filter: blur(48px); pointer-events: none;
}
.mys-vitrin .tilt {
  position: relative; z-index: 1; width: min(100%, 640px); height: 540px; margin: 0 auto;
}
.mys-vitrin .device {
  position: absolute; left: 50%; top: 0; width: 1280px; margin-left: -640px;
  transform-origin: 50% 42%; filter: none;
}
.mys-vitrin .laptop {
  width: 640px; margin: 0 auto; zoom: 2;
  padding: 8px 8px 0;
  background: linear-gradient(145deg, #5a5b64, #15161c 46%, #4e4f58);
  border: 1px solid #6d6e78; border-radius: 18px 18px 6px 6px;
  box-shadow: 0 0 28px rgba(225,6,0,.16), inset 0 1px 0 rgba(255,255,255,.2);
}
.mys-vitrin .camera {
  position: absolute; top: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2px;
  border-radius: 50%; background: #101218;
}
.mys-vitrin .screen {
  height: 400px; overflow: hidden; text-align: left;
  background: #090e17; border: 1px solid #242b36; border-radius: 11px 11px 3px 3px;
  padding: 12px; color: #fff;
}
.mys-vitrin .appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid #26303c; padding-bottom: 8px; margin-bottom: 10px; font-size: 12px;
}
.mys-vitrin .brand { font-weight: 800; font-size: 15px; white-space: nowrap; }
.mys-vitrin .brand b { color: #e10600; font-size: 18px; }
.mys-vitrin .brand small { font-weight: 500; color: #9aa5b6; }
.mys-vitrin .appnav { color: #a6b1c1; font-size: 10px; overflow: hidden; white-space: nowrap; }
.mys-vitrin .avatar {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  background: #e10600; border-radius: 50%; font-weight: 800; font-size: 12px;
}
.mys-vitrin .view { display: none; }
.mys-vitrin .view.active { display: block; animation: vitrinIn .35s ease; }
@keyframes vitrinIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mys-vitrin .panel,
.mys-vitrin .stats > div,
.mys-vitrin .mini-cards > div {
  background: linear-gradient(145deg, #151c28, #0c111b);
  border: 1px solid #283342; border-radius: 11px; padding: 10px;
}
.mys-vitrin .sales-layout { display: grid; grid-template-columns: 1.45fr .9fr; gap: 8px; }
.mys-vitrin .search {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid #8d1020; border-radius: 8px; color: #9ba6b6;
  padding: 7px 8px 7px 10px; font-size: 11px; margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(225,6,0,.08);
}
.mys-vitrin .search em {
  flex: none; font-style: normal; font-size: 10px; font-weight: 800; color: #fff;
  background: #e10600; border-radius: 999px; padding: 3px 7px;
}
.mys-vitrin .section-title {
  font-weight: 800; font-size: 12px; display: flex; justify-content: space-between;
  align-items: center; margin: 0 0 8px; gap: 8px;
}
.mys-vitrin .section-title span { font-size: 10px; color: #8394a9; font-weight: 500; }
.mys-vitrin .cart-line {
  display: grid; grid-template-columns: 1.3fr auto auto; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid #27313b; font-size: 11px;
}
.mys-vitrin .cart-line b { display: block; font-size: 12px; }
.mys-vitrin .cart-line small { display: block; color: #7f8b9b; font-size: 9px; margin-top: 1px; }
.mys-vitrin .cart-line strong { text-align: right; font-size: 12px; }
.mys-vitrin .qty {
  display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 800;
  border: 1px solid #36404c; border-radius: 999px; padding: 2px 6px;
}
.mys-vitrin .qty i { font-style: normal; color: #f0a8a8; }
.mys-vitrin .sum-row {
  display: flex; justify-content: space-between; margin-top: 6px;
  color: #9aa5b6; font-size: 10px;
}
.mys-vitrin .sum-row b { color: #eaf0f8; }
.mys-vitrin .total {
  margin-top: 8px; padding: 10px 8px; border-radius: 9px;
  background: linear-gradient(100deg, #171821, #4d0714);
  display: flex; justify-content: space-between; align-items: center; font-size: 12px;
}
.mys-vitrin .total strong { font-size: 16px; color: #fff; }
.mys-vitrin .pay { display: flex; gap: 6px; margin-top: 8px; }
.mys-vitrin .pay span {
  flex: 1; border: 1px solid #36404c; border-radius: 999px; text-align: center;
  padding: 6px 4px; font-size: 11px;
}
.mys-vitrin .pay .selected { background: #e10600; border-color: #e10600; color: #fff; }
.mys-vitrin .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mys-vitrin .products > div {
  min-height: 58px; border: 1px solid #34404c; border-radius: 9px;
  background: linear-gradient(145deg, #202734, #10141c);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 7px 8px; gap: 3px;
}
.mys-vitrin .products b { font-size: 12px; }
.mys-vitrin .products small { font-size: 11px; margin-top: 0; font-weight: 700; color: #f0a8a8; }
.mys-vitrin .products .is-on { border-color: #e10600; box-shadow: inset 0 0 0 1px rgba(225,6,0,.35); }
.mys-vitrin .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.mys-vitrin .stats.three { grid-template-columns: repeat(3, 1fr); }
.mys-vitrin .stats > div { display: flex; flex-direction: column; gap: 3px; }
.mys-vitrin .stats small { color: #a6b0be; font-size: 10px; }
.mys-vitrin .stats strong { font-size: 15px; }
.mys-vitrin .stats i { color: #f0a8a8; font-style: normal; font-size: 10px; }
.mys-vitrin .stats u {
  display: block; height: 3px; width: 70%; margin-top: 4px; border-radius: 99px;
  background: linear-gradient(90deg, #e10600, rgba(225,6,0,.15));
}
.mys-vitrin .home-split { display: grid; grid-template-columns: 1.35fr .85fr; gap: 8px; }
.mys-vitrin .chart-panel { height: auto; }
.mys-vitrin .chart {
  height: 118px; display: flex; align-items: flex-end; gap: 7px; padding: 8px 4px 0;
  border-bottom: 1px solid #3b4652;
  background: repeating-linear-gradient(to top, transparent 0, transparent 26px, rgba(255,255,255,.06) 27px, rgba(255,255,255,.06) 28px);
}
.mys-vitrin .chart div {
  flex: 1; background: linear-gradient(#ff3544, #9c0015); border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px rgba(225,6,0,.25);
}
.mys-vitrin .axis {
  display: flex; justify-content: space-between; color: #7f8b9b; font-size: 9px; margin-top: 4px;
}
.mys-vitrin .feed > div {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid #27313b; font-size: 11px; color: #c5ced8;
}
.mys-vitrin .feed > div:last-child { border-bottom: 0; }
.mys-vitrin .feed b { color: #fff; }
.mys-vitrin .top-list { display: grid; gap: 5px; margin-top: 8px; }
.mys-vitrin .top-list > div {
  display: grid; grid-template-columns: 72px 1fr 22px; align-items: center; gap: 6px; font-size: 10px;
}
.mys-vitrin .top-list i {
  display: block; height: 5px; border-radius: 99px; background: linear-gradient(90deg, #e10600, #ff6b6b);
}
.mys-vitrin .top-list b { text-align: right; }
.mys-vitrin .meter { height: 4px; border-radius: 99px; background: #27313b; margin: -2px 0 6px; }
.mys-vitrin .meter i { display: block; height: 100%; border-radius: 99px; background: #e10600; }
.mys-vitrin .breakdown .meter + div,
.mys-vitrin .breakdown > div:not(.section-title):not(.donut):not(.meter) { margin-bottom: 2px; }
.mys-vitrin .phone-bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-top: 8px; }
.mys-vitrin .phone-bars i { flex: 1; display: block; border-radius: 3px 3px 0 0; background: #e10600; }
.mys-vitrin .phone-bars i:nth-child(1) { height: 40%; }
.mys-vitrin .phone-bars i:nth-child(2) { height: 70%; }
.mys-vitrin .phone-bars i:nth-child(3) { height: 55%; }
.mys-vitrin .phone-bars i:nth-child(4) { height: 90%; }
.mys-vitrin .phone-bars i:nth-child(5) { height: 62%; opacity: .7; }
.mys-vitrin .phone-stat span { display: flex; flex-direction: column; }
.mys-vitrin .phone-stat small { font-size: 9px; }
.mys-vitrin .phone-pay { display: flex; gap: 4px; margin: 8px 0 4px; }
.mys-vitrin .phone-pay span {
  flex: 1; text-align: center; border: 1px solid #36404c; border-radius: 999px; padding: 4px 0; font-size: 10px;
}
.mys-vitrin .phone-pay .on { background: #e10600; border-color: #e10600; color: #fff; }
.mys-vitrin .mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.mys-vitrin .mini-cards > div { font-size: 11px; display: flex; justify-content: space-between; gap: 6px; }
.mys-vitrin .mini-cards b { color: #fff; }
.mys-vitrin .reports-layout { display: grid; grid-template-columns: 1.7fr .9fr; gap: 8px; }
.mys-vitrin .breakdown { font-size: 11px; }
.mys-vitrin .breakdown > div:not(.section-title):not(.donut):not(.meter) {
  display: flex; justify-content: space-between; margin: 4px 0 2px;
}
.mys-vitrin .donut {
  width: 78px; height: 78px; border-radius: 50%; margin: 4px auto 8px;
  background: conic-gradient(#e10600 0 52%, #f0a8a8 52% 90%, #3f3f46 90%);
  position: relative;
}
.mys-vitrin .donut::after {
  content: ""; position: absolute; inset: 18px; background: #121824; border-radius: 50%;
}
.mys-vitrin .mobile-view.active {
  display: flex; justify-content: center; align-items: center; gap: 28px; height: 348px;
}
.mys-vitrin .device.is-phones .appbar { display: none; }
.mys-vitrin .phone {
  width: 158px; height: 312px; background: #0a0b10; border: 7px solid #363a45;
  border-radius: 26px; position: relative; overflow: hidden;
  box-shadow: 12px 14px 22px rgba(0,0,0,.45), 0 0 16px rgba(225,6,0,.18);
  transform: rotateY(-12deg) rotateZ(-3deg);
}
.mys-vitrin .phone.second { transform: rotateY(12deg) rotateZ(4deg); }
.mys-vitrin .notch {
  position: absolute; top: 6px; left: 34%; width: 32%; height: 10px;
  border-radius: 20px; background: #000; z-index: 2;
}
.mys-vitrin .phone-content { padding: 22px 10px 8px; font-size: 11px; }
.mys-vitrin .phone-brand { font-weight: 800; color: #ff394a; margin-bottom: 8px; }
.mys-vitrin .phone-content small { color: #96a1b0; }
.mys-vitrin .phone-content h3 { margin: 4px 0 10px; font-size: 14px; color: #fff; }
.mys-vitrin .phone-content h2 { font-size: 18px; margin: 4px 0; color: #fff; }
.mys-vitrin .phone-highlight {
  padding: 8px; border-radius: 10px;
  background: linear-gradient(130deg, #500b19, #1a1520); border: 1px solid #8d1c30;
}
.mys-vitrin .spark { color: #ff2b41; letter-spacing: 2px; font-size: 18px; }
.mys-vitrin .phone-stat {
  display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #30313a;
}
.mys-vitrin .phone-actions { font-size: 10px; margin-top: 12px; color: #c4cbd8; }
.mys-vitrin .phone-button {
  background: #e10600; border-radius: 999px; text-align: center; padding: 9px;
  margin-top: 14px; font-weight: 800; color: #fff;
}
.mys-vitrin .keyboard {
  position: absolute; left: -7%; width: 114%; height: 54px; top: 100%;
  background: linear-gradient(#424550, #14161e); border: 1px solid #777986;
  border-radius: 4px 4px 18px 18px; transform: rotateX(68deg); transform-origin: top center;
  box-shadow: 0 12px 18px rgba(0,0,0,.45);
}
.mys-vitrin .keys {
  margin: 7px auto 0; width: 78%; height: 16px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #14161b 0 14px, #4b4d55 15px 17px);
}
.mys-vitrin .trackpad {
  margin: 5px auto; width: 18%; height: 12px; border: 1px solid #666875; border-radius: 4px;
}
.mys-vitrin .note { margin: 8px 0 0; text-align: center; color: #71717a; font-size: 12px; }
.show-stage { display: grid; grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr); gap: 28px; align-items: center; }
.show-copy .land-pane.is-on { display: block; }
@media (max-width: 980px) {
  .show-stage { grid-template-columns: 1fr; }
  .mys-vitrin .scene { height: 460px; }
  .mys-vitrin .screen { height: 300px; padding: 8px; }
  .mys-vitrin .appnav { display: none; }
  .mys-vitrin .products > div { min-height: 48px; font-size: 14px; }
  .mys-vitrin .stats strong { font-size: 12px; }
  .mys-vitrin .chart { height: 72px; }
  .mys-vitrin .home-split,
  .mys-vitrin .reports-layout { grid-template-columns: 1fr; }
  .mys-vitrin .feed,
  .mys-vitrin .top-list,
  .mys-vitrin .breakdown { display: none; }
  .mys-vitrin .mobile-view.active { height: 276px; gap: 10px; }
  .mys-vitrin .phone { transform: scale(.72) rotateZ(-3deg); margin: -40px -16px; }
  .mys-vitrin .phone.second { transform: scale(.72) rotateZ(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mys-vitrin .view.active { animation: none; }
}