.mm-social-widget {
  --mm-social-tab-width: 46px;
  position: fixed;
  z-index: 9000;
  top: 52%;
  left: 0;
  width: min(430px, calc(100vw - 8px));
  max-height: calc(100dvh - 20px);
  color: #322243;
  font-family: Montserrat, system-ui, sans-serif;
  transform: translate3d(calc(-100% + var(--mm-social-tab-width)), -50%, 0);
  transition: transform .68s cubic-bezier(.22, 1, .28, 1);
  isolation: isolate;
}

.mm-social-widget *, .mm-social-widget *::before, .mm-social-widget *::after { box-sizing: border-box; }
.mm-social-widget.is-open { transform: translate3d(0, -50%, 0); }

.mm-social-panel {
  position: relative;
  width: calc(100% - var(--mm-social-tab-width));
  max-height: calc(100dvh - 20px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 21px 20px 17px;
  border: 1px solid #e9d9f3;
  border-left: 0;
  border-radius: 0 25px 25px 0;
  background: radial-gradient(circle at 95% 2%, rgba(212, 171, 240, .26), transparent 35%), linear-gradient(155deg, #fff 0%, #fdfaff 55%, #f6eefb 100%);
  box-shadow: 12px 22px 54px rgba(47, 19, 73, .2), inset -1px 0 rgba(255, 255, 255, .9);
  scrollbar-width: thin;
  scrollbar-color: #c9aed9 transparent;
}

.mm-social-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mm-social-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #7716ad; font-size: 9px; font-weight: 800; letter-spacing: .16em; white-space: nowrap; }
.mm-social-eyebrow span { color: #c18a00; font-size: 14px; }
.mm-social-close { display: grid; flex: 0 0 32px; width: 32px; height: 32px; padding: 7px; place-items: center; border: 1px solid #e6d8ef; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(69, 27, 102, .04); color: #69447c; cursor: pointer; transition: background .2s ease, color .2s ease, transform .25s ease; }
.mm-social-close:hover { background: #f4e7fc; color: #67109e; transform: rotate(90deg); }
.mm-social-close svg { display: block; width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.mm-social-intro { margin: 15px 0 17px; }
.mm-social-intro h2 { margin: 0; color: #2e1c42; font-size: clamp(24px, 4vw, 29px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; }
.mm-social-intro h2 em { color: #7614ae; font-style: normal; }
.mm-social-intro p { max-width: 310px; margin: 8px 0 0; color: #786a81; font-size: 11px; line-height: 1.55; }

.mm-social-carousel { position: relative; }
.mm-social-track { display: flex; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mm-social-track::-webkit-scrollbar { display: none; }
.mm-social-slide { --social-accent: #6d28ad; --social-soft: #f1e7fa; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.mm-social-slide[data-platform="discord"] { --social-accent: #5865d9; --social-soft: #edf0ff; }
.mm-social-slide[data-platform="instagram"] { --social-accent: #c13584; --social-soft: #fff0f7; }
.mm-social-slide[data-platform="youtube"] { --social-accent: #e61f38; --social-soft: #fff0f1; }
.mm-social-slide[data-platform="tiktok"] { --social-accent: #29233a; --social-soft: #f2f0f7; }
.mm-social-slide[data-platform="telegram"] { --social-accent: #229ed9; --social-soft: #e9f7fe; }

.mm-social-card { position: relative; display: flex; flex-direction: column; min-height: 267px; padding: 18px; overflow: hidden; border: 1px solid #e7dbef; border-radius: 19px; background: #fff; box-shadow: 0 8px 23px rgba(70, 31, 101, .07); }
.mm-social-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--social-accent); content: ''; }
.mm-social-card::after { position: absolute; top: -54px; right: -52px; width: 169px; height: 169px; border-radius: 50%; background: var(--social-soft); opacity: .8; content: ''; pointer-events: none; }
.mm-social-slide[aria-hidden="false"] .mm-social-card { animation: mm-social-card-in .38s ease both; }
.mm-social-card__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.mm-social-card__icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(0, 0, 0, .04); border-radius: 15px; background: var(--social-soft); color: var(--social-accent); font-size: 25px; transition: transform .3s ease, box-shadow .3s ease; }
.mm-social-card:hover .mm-social-card__icon { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 8px 18px rgba(57, 27, 83, .12); }
.mm-social-card__number { padding-top: 3px; color: #a68eb4; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.mm-social-card__kind { position: relative; z-index: 1; margin-top: 16px; color: var(--social-accent); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.mm-social-card h3 { position: relative; z-index: 1; margin: 3px 0 0; color: #302043; font-size: 27px; font-weight: 800; letter-spacing: -.05em; line-height: 1.15; }
.mm-social-card__handle { position: relative; z-index: 1; margin-top: 3px; color: #8b7d95; font-size: 10px; font-weight: 700; }
.mm-social-card p { position: relative; z-index: 1; min-height: 34px; margin: 10px 0 12px; color: #6f627a; font-size: 10px; line-height: 1.55; }
.mm-social-card__link { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 39px; margin-top: auto; padding: 8px 12px; border: 1px solid #6e16a5; border-radius: 10px; background: #7118aa; color: #fff; font-size: 10px; font-weight: 800; text-decoration: none; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.mm-social-card__link:hover { background: #5a0e8d; box-shadow: 0 8px 17px rgba(102, 21, 157, .2); transform: translateY(-2px); }
.mm-social-card__link svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.mm-social-card__link:hover svg { transform: translateX(3px); }

.mm-social-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.mm-social-controls__arrows { display: flex; gap: 7px; }
.mm-social-controls__arrows button { display: grid; width: 35px; height: 35px; padding: 8px; place-items: center; border: 1px solid #dfceeb; border-radius: 10px; background: #fff; color: #6e249e; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.mm-social-controls__arrows button:hover { border-color: #b985d6; background: #f5eafd; transform: translateY(-2px); }
.mm-social-controls__arrows svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-social-prev svg { transform: rotate(180deg); }
.mm-social-dots { display: flex; align-items: center; justify-content: center; gap: 5px; }
.mm-social-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #d8c7e3; cursor: pointer; transition: width .25s ease, background .25s ease; }
.mm-social-dots button[aria-current="true"] { width: 20px; background: #7614ae; }
.mm-social-dots button:hover { background: #9d61c2; }
.mm-social-count { color: #907b9b; font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.mm-social-hint { margin: 13px 0 0; color: #998aa3; font-size: 9px; text-align: center; }
.mm-social-hint span { color: #791caf; }

.mm-social-tab { position: absolute; top: 50%; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: var(--mm-social-tab-width); height: 77px; padding: 0; border: 1px solid rgba(255, 218, 117, .56); border-left: 0; border-radius: 0 15px 15px 0; background: linear-gradient(155deg, #8422b9, #59108c); box-shadow: 5px 9px 22px rgba(71, 22, 103, .25), inset 0 1px rgba(255, 255, 255, .22); color: #fff; cursor: pointer; transform: translateY(-50%); transition: background .2s ease, box-shadow .2s ease; }
.mm-social-tab:hover { background: linear-gradient(155deg, #972eca, #6813a0); box-shadow: 6px 11px 26px rgba(71, 22, 103, .34); }
.mm-social-tab__icon { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 9px; background: rgba(255, 255, 255, .1); transition: transform .25s ease; }
.mm-social-tab__icon svg { width: 20px; height: 20px; stroke: #ffe493; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mm-social-tab:hover .mm-social-tab__icon { transform: rotate(-9deg) scale(1.08); }
.mm-social-tab__label { font-size: 7px; font-weight: 800; letter-spacing: .1em; }

.mm-social-widget :is(button, a):focus-visible { outline: 3px solid #e4ad20; outline-offset: 3px; }
@keyframes mm-social-card-in { from { opacity: .3; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .mm-social-widget { --mm-social-tab-width: 40px; top: 50%; width: min(408px, calc(100vw - 6px)); }
  .mm-social-panel { padding: 18px 15px 15px; border-radius: 0 21px 21px 0; }
  .mm-social-tab { height: 68px; border-radius: 0 13px 13px 0; }
  .mm-social-tab__icon { width: 26px; height: 26px; }
  .mm-social-tab__icon svg { width: 18px; height: 18px; }
  .mm-social-tab__label { font-size: 6px; }
  .mm-social-card { min-height: 263px; padding: 16px; }
}

@media (max-height: 600px) {
  .mm-social-intro { margin: 9px 0 10px; }
  .mm-social-intro p { margin-top: 5px; }
  .mm-social-card { min-height: 245px; }
  .mm-social-controls { margin-top: 9px; }
  .mm-social-hint { margin-top: 8px; }
}

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