.sr-mk{
  position:fixed;
  z-index: 999999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --sr-mk-main:#0b0f1a;
  --sr-mk-panel:#0b1020;
  --sr-mk-text:#ffffff;
  --sr-mk-red:#e31e24;
  --sr-mk-blue:#1e4bd8;
}
.sr-mk *{ box-sizing:border-box; }

.sr-mk__main{
  display:flex;
  align-items:center;
  gap:12px;
  width: 288px;
  max-width: calc(100vw - 32px);

  cursor:pointer;
  padding: 10px 12px;
  border-radius: 999px;

  /* OMG Media container styling */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sr-mk-main), var(--sr-mk-main)) padding-box,
    linear-gradient(135deg, rgba(227,30,36,.80), rgba(30,75,216,.80)) border-box;

  color: var(--sr-mk-text);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 26px rgba(227,30,36,.10),
    0 0 26px rgba(30,75,216,.10);

  transition: transform .12s ease, filter .12s ease;
}
.sr-mk__main:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.sr-mk__main:active{ transform: translateY(0px) scale(.99); }

.sr-mk__mainIcon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}
.sr-mk__mainIcon svg{ width: 22px; height: 22px; display:block; color: #fff; }

.sr-mk__mainText{ display:flex; flex-direction:column; gap:2px; min-width:0; flex: 1 1 auto; }
.sr-mk__mainTitle{ font-weight:850; font-size:14px; letter-spacing:.2px; line-height:1.1; }
.sr-mk__mainSub{
  font-weight:650;
  font-size: 12px;
  opacity: .78;
  line-height:1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-mk__chev{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .16s ease;
  flex: 0 0 auto;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.sr-mk__chev svg{ width:18px; height:18px; display:block; color: var(--sr-mk-text); }
.sr-mk[data-open="1"] .sr-mk__chev{ transform: rotate(180deg); }

.sr-mk__panel{
  position:absolute;
  left: 0;
  min-width: 300px;
  max-width: calc(100vw - 32px);

  bottom: 64px;
  display:none;
  flex-direction: column;
  gap: 10px;
  padding: 12px;

  border-radius: 18px;

  border: 1px solid transparent;
  background:
    linear-gradient(rgba(11,16,32,.82), rgba(11,16,32,.82)) padding-box,
    linear-gradient(135deg, rgba(227,30,36,.30), rgba(30,75,216,.28)) border-box;

  box-shadow: 0 18px 70px rgba(0,0,0,.40);
  backdrop-filter: blur(12px);
}
.sr-mk[data-pos="right"] .sr-mk__panel{ right: 0; left: auto; }
.sr-mk[data-open="1"] .sr-mk__panel{ display:flex; }

.sr-mk__panelTitle{
  font-weight: 850;
  font-size: 13px;
  letter-spacing: .2px;
  opacity: .92;
  padding: 4px 6px 2px 6px;
}

.sr-mk__item{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--sr-mk-text);

  padding: 12px;
  border-radius: 16px;

  /* clean & readable card */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.sr-mk__item:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); transform: translateY(-1px); }
.sr-mk__item:active{ transform: translateY(0px); }

.sr-mk__itemIcon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;

  /* icon tile uses official/brand colors, not OMG Media */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.sr-mk__itemIcon svg{ width: 22px; height: 22px; display:block; color:#fff; }

.sr-mk__itemText{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sr-mk__itemTitle{ font-size: 15px; font-weight: 850; line-height:1.1; }
.sr-mk__itemSub{ font-size: 12px; font-weight: 650; opacity: .75; line-height:1.1; }

/* brand tiles */
.sr-mk__item[data-id="wa"] .sr-mk__itemIcon{ background: linear-gradient(135deg, #25D366, #128C7E); }
.sr-mk__item[data-id="tg"] .sr-mk__itemIcon{ background: linear-gradient(135deg, #2AABEE, #229ED9); }
.sr-mk__item[data-id="vk"] .sr-mk__itemIcon{ background: linear-gradient(135deg, #4C75A3, #2A5885); }
.sr-mk__item[data-id="max"] .sr-mk__itemIcon{ background: linear-gradient(135deg, #7C3AED, #4F46E5); }
.sr-mk__item[data-id="call"] .sr-mk__itemIcon{ background: linear-gradient(135deg, #ef4444, #b91c1c); }

.sr-mk__tooltip{
  position:absolute;
  left: 0;
  bottom: 74px;
  max-width: 260px;
  display:none;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,16,32,.92);
  color:#fff;
  padding: 10px 12px;

  box-shadow: 0 14px 50px rgba(0,0,0,.32);
  backdrop-filter: blur(12px);
}
.sr-mk[data-pos="right"] .sr-mk__tooltip{ right: 0; left: auto; }
.sr-mk__tooltipText{ font-size: 13px; font-weight: 800; }
.sr-mk__tooltipArrow{
  position:absolute;
  width: 14px;
  height: 14px;
  background: rgba(11,16,32,.92);
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  bottom: -7px;
  transform: rotate(45deg);
  left: 24px;
}
.sr-mk[data-pos="right"] .sr-mk__tooltipArrow{ right: 24px; left:auto; }
.sr-mk__tooltip.show{ display:block; }

/* Mobile: button centered */
@media (max-width: 520px){
  .sr-mk{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  .sr-mk__main{ width: 300px; }
  .sr-mk__panel{ min-width: 300px; }
}

/* Center position tweaks (mobile) */
.sr-mk[data-pos="center"] .sr-mk__panel{ left: 50%; transform: translateX(-50%); right: auto; }
.sr-mk[data-pos="center"] .sr-mk__tooltip{ left: 50%; transform: translateX(-50%); right: auto; }
.sr-mk[data-pos="center"] .sr-mk__tooltipArrow{ left: 50%; right: auto; transform: translateX(-50%) rotate(45deg); }


/* =========================================================
   SR Multiknopka — Desktop modal + QR
   ========================================================= */

html.sr-mk--lock,
html.sr-mk--lock body {
  overflow: hidden !important;
}

@media (min-width: 992px) {
  .sr-mk[data-desktop-ui="modal"] .sr-mk__panel {
    display: none !important;
  }
}

/* Modal container */
.sr-mk-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.sr-mk--modal-open .sr-mk-modal {
  display: flex;
}

.sr-mk-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

.sr-mk-modal__window {
  position: relative;
  width: min(860px, 100%);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  padding: 18px;
  color: var(--sr-mk-text);
}

.sr-mk-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: var(--sr-mk-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sr-mk-modal__head {
  padding: 6px 44px 10px 6px;
}

.sr-mk-modal__title {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
}

.sr-mk-modal__sub {
  margin-top: 6px;
  opacity: .82;
  font-size: 14px;
  line-height: 1.35;
}

.sr-mk-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .sr-mk-modal__grid {
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
}

.sr-mk-modal__qr {
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  padding: 14px;
}

.sr-mk-modal__qrLabel {
  font-weight: 700;
  font-size: 13px;
  opacity: .9;
  margin-bottom: 10px;
}

.sr-mk-modal__qrBox {
  display: inline-block;
  border-radius: 18px;
  background: #fff;
  padding: 0; /* canvas already includes quiet zone */
  overflow: visible; /* avoid clipping corners of QR */
}

.sr-mk-modal__qrBox img,
.sr-mk-modal__qrBox canvas,
.sr-mk-modal__qrBox svg {
  display: block;
  max-width: none; /* avoid CSS scaling that blurs QR */
  height: auto;
}

.sr-mk-modal__qrBox canvas {
  image-rendering: pixelated;
}

.sr-mk-modal__qrLink {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  opacity: .88;
  color: var(--sr-mk-text);
  text-decoration: underline;
}

.sr-mk-modal__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 720px) {
  .sr-mk-modal__actions {
    grid-template-columns: 1fr;
  }
}

.sr-mk-modal__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  color: var(--sr-mk-text);
  transition: transform .12s ease, border-color .12s ease;
}

.sr-mk-modal__btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

.sr-mk-modal__btnIcon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(227,30,36,.25), rgba(30,75,216,.25));
  border: 1px solid rgba(255,255,255,.14);
}

.sr-mk-modal__btnIcon svg {
  width: 22px;
  height: 22px;
}

.sr-mk-modal__btnTitle {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
}

.sr-mk-modal__btnSub {
  display: block;
  font-size: 13px;
  opacity: .78;
  margin-top: 2px;
  line-height: 1.2;
}

.sr-mk-modal__foot {
  margin-top: 12px;
  opacity: .55;
  font-size: 12px;
  padding-left: 6px;
}

/* =========================================================
   SR Multiknopka — UI v2 (compact modal + brand buttons like example)
   ========================================================= */

/* shared logo img inside icon containers */
.sr-mk-logo{display:block;width:22px;height:22px;object-fit:contain;}

/* --- Desktop modal sizing (more compact) --- */
.sr-mk-modal__window{
  width: min(700px, 100%);
  padding: 16px;
  border-radius: 18px;
}
.sr-mk-modal__title{font-size:20px;}
.sr-mk-modal__sub{font-size:13px;}

@media (min-width: 720px){
  .sr-mk-modal__grid{grid-template-columns: 290px 1fr; gap:16px;}
}

/* QR card closer to reference */
.sr-mk-modal__qr{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
}
.sr-mk-modal__qrLabel{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(42,171,238,.22);
  border: 1px solid rgba(42,171,238,.28);
  margin-bottom: 12px;
}
.sr-mk-modal__qrBox{border-radius:16px; overflow:hidden;}

/* --- Brand buttons (modal) --- */
.sr-mk-modal__actions{gap:12px;}

.sr-mk-modal__btn{
  border: 0;
  color: #fff;
  padding: 14px 16px;
  border-radius: 16px;
  /* keep compact but give icons more room */
  min-height: 62px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.sr-mk-modal__btnIcon{
  /* Icon tile should be ~85% of button height */
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.18);
}
.sr-mk-modal__btnIcon .sr-mk-logo,
.sr-mk-modal__btnIcon svg{width:46px;height:46px;}

/* Per-channel modal button backgrounds */
.sr-mk-modal__btn[data-id="wa"]{background:#25D366;}
.sr-mk-modal__btn[data-id="tg"]{background:#2AABEE;}
.sr-mk-modal__btn[data-id="vk"]{background:#0077FF;}
.sr-mk-modal__btn[data-id="max"]{background:linear-gradient(90deg,#22d3ee,#7c3aed);}
.sr-mk-modal__btn[data-id="call"]{background:linear-gradient(135deg,#22c55e,#16a34a);}

/* closer to reference: keep only title, hide subtitle */
.sr-mk-modal__btnSub{display:none;}

/* --- Mobile panel buttons (same look) --- */
.sr-mk__panel{gap:12px;}

.sr-mk__item{
  border: 0;
  color:#fff;
  padding: 12px 14px;
  border-radius: 16px;
  min-height: 62px;
  background: rgba(255,255,255,.08);
}

.sr-mk__itemIcon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
}
.sr-mk__itemIcon svg,
.sr-mk__itemIcon .sr-mk-logo{width:46px;height:46px;}

.sr-mk__itemSub{display:none;}

.sr-mk__item[data-id="wa"]{background:#25D366;}
.sr-mk__item[data-id="tg"]{background:#2AABEE;}
.sr-mk__item[data-id="vk"]{background:#0077FF;}
.sr-mk__item[data-id="max"]{background:linear-gradient(90deg,#22d3ee,#7c3aed);}
.sr-mk__item[data-id="call"]{background:linear-gradient(135deg,#22c55e,#16a34a);}

/* make panel title more compact */
.sr-mk__panelTitle{padding:0 2px 2px 2px; opacity:.9;}

/* =========================================================
   SR MULTIKNOPKA v0.3.8 — SVG icons + UI fixes
   - no icon badges/circles
   - bigger icons (~90% button height)
   - show subtitles
   - call button green
   - center QR label/box
   ========================================================= */

.sr-mk-modal__qr{
  text-align:center;
}
.sr-mk-modal__qrLabel{
  display:block;
  width:fit-content;
  margin:0 auto 12px;
}
.sr-mk-modal__qrBox{
  display:block;
  width:fit-content;
  margin:0 auto;
}

.sr-mk-modal__btnIcon,
.sr-mk__itemIcon{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.sr-mk-modal__btnIcon svg,
.sr-mk__itemIcon svg,
.sr-mk-modal__btnIcon .sr-mk-logo,
.sr-mk__itemIcon .sr-mk-logo{
  width:56px !important;
  height:56px !important;
  display:block;
  fill:currentColor;
}

.sr-mk-modal__btnIcon svg *,
.sr-mk__itemIcon svg *{
  fill:currentColor;
}

.sr-mk-modal__btnSub,
.sr-mk__itemSub{
  display:block !important;
  opacity:.9;
  font-size:13px;
  font-weight:650;
  margin-top:2px;
}

.sr-mk__item[data-id="call"],
.sr-mk-modal__btn[data-id="call"]{
  background:#22c55e !important;
}

.sr-mk-modal__foot{
  text-align:center;
  margin-top:12px;
  opacity:.6;
  font-size:12px;
}
.sr-mk-modal__foot a{
  color:inherit;
  text-decoration:none;
}
.sr-mk-modal__foot a:hover{
  text-decoration:underline;
}

/* =========================================================
   SR MULTIKNOPKA v0.3.8.2 — UI tuning
   - Fix close button alignment
   - Force all text links inside widget/modal to stay white
   - Optimize button sizes (comfortable touch target, less bulky)
   ========================================================= */

/* Close button: perfectly centered "×" and consistent shape */
.sr-mk-modal__close{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:999px;
  width:40px;
  height:40px;
  font-size:24px;
  line-height:1;
}

/* Keep all plugin links white in every state (hover/active/visited) */
.sr-mk a,
.sr-mk a:visited,
.sr-mk a:hover,
.sr-mk a:active,
.sr-mk a:focus{ color: var(--sr-mk-text) !important; }

/* Modal action buttons + mobile panel buttons: smaller, but still comfortable */
.sr-mk-modal__btn,
.sr-mk__item{
  min-height:56px;
  padding:10px 14px;
  gap:12px;
}

/* Icon size tuned down (still large, but not bulky) */
.sr-mk-modal__btnIcon,
.sr-mk__itemIcon{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
}

.sr-mk-modal__btnIcon svg,
.sr-mk__itemIcon svg,
.sr-mk-modal__btnIcon .sr-mk-logo,
.sr-mk__itemIcon .sr-mk-logo{
  width:44px !important;
  height:44px !important;
}

/* Typography slightly tighter for compactness */
.sr-mk-modal__btnTitle,
.sr-mk__itemTitle{
  font-size:14px;
  line-height:1.15;
}

.sr-mk-modal__btnSub,
.sr-mk__itemSub{
  font-size:12px;
  line-height:1.15;
  margin-top:2px;
}

/* =========================================================
   QR scan animation (corners converge + scan line)
   Runs only while modal is open.
   ========================================================= */

.sr-mk-modal__qrBox{
  position: relative;
  isolation: isolate; /* ensure pseudo-elements layer correctly */
}

/* Keep QR code below the animation layers */
.sr-mk-modal__qrBox > img,
.sr-mk-modal__qrBox > canvas,
.sr-mk-modal__qrBox > svg{
  position: relative;
  z-index: 1;
}

/* Corner frame */
.sr-mk-modal__qrBox::before{
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;

  /* start as a larger frame, then converge closer to QR */
  inset: 2px;
  opacity: 0;
  transform: scale(1);
  will-change: inset, opacity, transform, filter;

  /* 8 gradients = 4 corners (horizontal + vertical) */
  --sr-mk-qr-c: rgba(2,6,23,.55); /* dark corners for better contrast */
  --sr-mk-qr-w: 24px;
  --sr-mk-qr-t: 4px;

  background:
    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) left  top    / var(--sr-mk-qr-w) var(--sr-mk-qr-t) no-repeat,
    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) left  top    / var(--sr-mk-qr-t) var(--sr-mk-qr-w) no-repeat,

    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) right top    / var(--sr-mk-qr-w) var(--sr-mk-qr-t) no-repeat,
    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) right top    / var(--sr-mk-qr-t) var(--sr-mk-qr-w) no-repeat,

    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) left  bottom / var(--sr-mk-qr-w) var(--sr-mk-qr-t) no-repeat,
    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) left  bottom / var(--sr-mk-qr-t) var(--sr-mk-qr-w) no-repeat,

    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) right bottom / var(--sr-mk-qr-w) var(--sr-mk-qr-t) no-repeat,
    linear-gradient(var(--sr-mk-qr-c), var(--sr-mk-qr-c)) right bottom / var(--sr-mk-qr-t) var(--sr-mk-qr-w) no-repeat;

  /* subtle glow like a scanner frame */
  filter:
    drop-shadow(0 0 12px rgba(42,171,238,.26))
    drop-shadow(0 0 2px rgba(0,0,0,.55));
}

/* Scan line */
.sr-mk-modal__qrBox::after{
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;

  left: 12px;
  right: 12px;
  height: 66px;
  top: -78px;
  border-radius: 999px;
  opacity: 0;

  /* more visible "scanner" beam */
  background: linear-gradient(
    to bottom,
    rgba(42,171,238,0) 0%,
    rgba(42,171,238,.18) 22%,
    rgba(255,255,255,.22) 50%,
    rgba(227,30,36,.12) 78%,
    rgba(227,30,36,0) 100%
  );

  filter:
    drop-shadow(0 0 18px rgba(42,171,238,.18))
    drop-shadow(0 0 14px rgba(255,255,255,.14));
}

/* Run animations only when modal is open */
.sr-mk--modal-open .sr-mk-modal__qrBox::before{
  animation: srMkQrCorners 3.1s infinite ease-in-out;
}

.sr-mk--modal-open .sr-mk-modal__qrBox::after{
  animation: srMkQrScan 3.1s infinite ease-in-out;
}

@keyframes srMkQrCorners{
  0%   { opacity: 0; inset: 2px; transform: scale(.98); filter: drop-shadow(0 0 8px rgba(42,171,238,.18)) drop-shadow(0 0 1px rgba(0,0,0,.45)); }
  12%  { opacity: 1; inset: 2px; transform: scale(1);   filter: drop-shadow(0 0 12px rgba(42,171,238,.24)) drop-shadow(0 0 2px rgba(0,0,0,.55)); }
  32%  { opacity: 1; inset: 18px; transform: scale(1);  filter: drop-shadow(0 0 12px rgba(42,171,238,.24)) drop-shadow(0 0 2px rgba(0,0,0,.55)); }

  /* Pulse moments during the beam pass */
  56%  { opacity: 1; inset: 18px; transform: scale(1.035); filter: drop-shadow(0 0 18px rgba(42,171,238,.34)) drop-shadow(0 0 3px rgba(0,0,0,.70)); }
  62%  { opacity: .92; inset: 18px; transform: scale(1);    filter: drop-shadow(0 0 12px rgba(42,171,238,.24)) drop-shadow(0 0 2px rgba(0,0,0,.55)); }
  74%  { opacity: 1; inset: 18px; transform: scale(1.035); filter: drop-shadow(0 0 18px rgba(42,171,238,.34)) drop-shadow(0 0 3px rgba(0,0,0,.70)); }
  80%  { opacity: .92; inset: 18px; transform: scale(1);    filter: drop-shadow(0 0 12px rgba(42,171,238,.24)) drop-shadow(0 0 2px rgba(0,0,0,.55)); }

  100% { opacity: 0; inset: 18px; transform: scale(1); }
}

@keyframes srMkQrScan{
  0%, 38% { opacity: 0; transform: translateY(0); }
  44%     { opacity: 1; transform: translateY(0); }
  92%     { opacity: 1; transform: translateY(520%); }
  100%    { opacity: 0; transform: translateY(520%); }
}

@media (prefers-reduced-motion: reduce){
  .sr-mk-modal__qrBox::before,
  .sr-mk-modal__qrBox::after{
    animation: none !important;
    opacity: 0 !important;
  }
}


/* =========================================================
   Accessibility helpers (focus + reduced motion)
   ========================================================= */
.sr-mk a:focus-visible,
.sr-mk button:focus-visible{
  outline: 2px solid var(--sr-mk-blue);
  outline-offset: 3px;
}

.sr-mk-modal__close:focus-visible{
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .sr-mk *,
  .sr-mk *::before,
  .sr-mk *::after{
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   Theme variants (glass / light / dark)
   ========================================================= */
.sr-mk--theme-light{
  --sr-mk-main:#ffffff;
  --sr-mk-panel:#f6f7fb;
  --sr-mk-text:#0b0f1a;
}
.sr-mk--theme-light .sr-mk__main{
  border:1px solid rgba(0,0,0,.10);
  background:
    linear-gradient(var(--sr-mk-main), var(--sr-mk-main)) padding-box,
    linear-gradient(135deg, rgba(227,30,36,.35), rgba(30,75,216,.35)) border-box;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}
.sr-mk--theme-light .sr-mk__panel{
  background:
    linear-gradient(var(--sr-mk-panel), var(--sr-mk-panel)) padding-box,
    linear-gradient(135deg, rgba(227,30,36,.18), rgba(30,75,216,.16)) border-box;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
  backdrop-filter: none;
}
.sr-mk--theme-light .sr-mk__item{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}
.sr-mk--theme-light .sr-mk__item:hover{ background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); }

.sr-mk--theme-light .sr-mk-modal__window{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
  color: var(--sr-mk-text);
}
.sr-mk--theme-light .sr-mk-modal__close{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  color: var(--sr-mk-text);
}

/* ---------------------------------------------------------
   Dark theme: solid black UI (no glass blur)
   --------------------------------------------------------- */
.sr-mk--theme-dark{
  --sr-mk-main:#0b0f1a;
  --sr-mk-panel:#0b1020;
  --sr-mk-text:#ffffff;
}

.sr-mk--theme-dark .sr-mk__main{
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sr-mk-main), var(--sr-mk-main)) padding-box,
    linear-gradient(135deg, rgba(227,30,36,.85), rgba(30,75,216,.85)) border-box;
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 26px rgba(227,30,36,.10),
    0 0 26px rgba(30,75,216,.10);
}

.sr-mk--theme-dark .sr-mk__panel{
  background:
    linear-gradient(rgba(11,16,32,.98), rgba(11,16,32,.98)) padding-box,
    linear-gradient(135deg, rgba(227,30,36,.38), rgba(30,75,216,.34)) border-box;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  backdrop-filter: none;
}

.sr-mk--theme-dark .sr-mk__item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.sr-mk--theme-dark .sr-mk__item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.sr-mk--theme-dark .sr-mk-modal__window{
  background: rgba(11,15,26,.98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 80px rgba(0,0,0,.65);
}

.sr-mk--theme-dark .sr-mk-modal__close{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--sr-mk-text);
}