/* MR: odznaki uzytkownikow obok nicku (ikonka Font Awesome w wybranym kolorze) */
.mr-ubadges {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  height: 20px;
  margin-left: 2px;
  vertical-align: middle;
  flex: 0 0 auto;
  line-height: 1;
}
.mr-ubadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: var(--mr-ub, #0053cb);
  font-size: 14px;
  line-height: 1;
}
.mr-ubadge > i { font-size: inherit; line-height: 1; }
.mr-ubadges-lg { height: 24px; gap: 4px; margin-left: 4px; }
.mr-ubadges-lg .mr-ubadge { width: 21px; height: 21px; font-size: 17px; }
.mr-ubadges-slot:empty { display: none; }
.mr-ubadges-slot { display: inline-flex; align-items: center; vertical-align: middle; }

/* ---- okno "Przyznaj odznakę" (tylko admin) ---- */
.mr-bdg-back {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
}
.mr-bdg-dlg {
  --b-bg: #000; --b-line: #2f3336; --b-text: #e7e9ea; --b-dim: #8b98a5; --b-field: #16181c; --b-hover: rgba(231,233,234,.08);
  width: 100%; max-width: 480px; max-height: min(90vh, 760px);
  display: flex; flex-direction: column;
  background: var(--b-bg); color: var(--b-text);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 15px rgba(255,255,255,.2), 0 0 3px 1px rgba(255,255,255,.15);
  font-size: 15px;
}
html[data-mr-theme="light"] .mr-bdg-dlg {
  --b-bg: #fff; --b-line: #eff3f4; --b-text: #0f1419; --b-dim: #536471; --b-field: #f7f9f9; --b-hover: rgba(15,20,25,.06);
  box-shadow: 0 0 15px rgba(101,119,134,.2), 0 0 3px 1px rgba(101,119,134,.15);
}
.mr-bdg-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--b-line); }
.mr-bdg-head h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; color: var(--b-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-bdg-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--b-text); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mr-bdg-x:hover { background: var(--b-hover); }
.mr-bdg-body { overflow-y: auto; padding: 14px 16px 16px; overscroll-behavior: contain; }
.mr-bdg-label { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--b-dim); text-transform: uppercase; letter-spacing: .02em; }
.mr-bdg-label:first-child { margin-top: 0; }
.mr-bdg-cur { display: flex; flex-direction: column; gap: 6px; }
.mr-bdg-cur-empty { color: var(--b-dim); font-size: 14px; }
.mr-bdg-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--b-line); border-radius: 12px; }
.mr-bdg-row .mr-ubadge { width: 24px; height: 24px; font-size: 18px; }
.mr-bdg-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mr-bdg-row-t small { color: var(--b-dim); margin-left: 6px; }
.mr-bdg-ib { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--b-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; }
.mr-bdg-ib:hover { background: var(--b-hover); color: var(--b-text); }
.mr-bdg-ib.del:hover { color: #f4212e; background: rgba(244,33,46,.1); }
.mr-bdg-ib:disabled { opacity: .3; pointer-events: none; }
.mr-bdg-prev { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--b-field); }
.mr-bdg-prev-name { font-weight: 700; font-size: 15px; }
.mr-bdg-prev .mr-ubadge { width: 20px; height: 20px; font-size: 16px; }
.mr-bdg-prev-big { margin-left: auto; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--mr-ub); border: 1px solid var(--b-line); }
.mr-bdg-input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--b-line); border-radius: 8px;
  background: var(--b-bg); color: var(--b-text);
  font: inherit; font-size: 15px; outline: none;
}
.mr-bdg-input:focus { border-color: #0053cb; box-shadow: 0 0 0 1px #0053cb; }
.mr-bdg-hint { margin-top: 6px; font-size: 12px; color: var(--b-dim); }
.mr-bdg-hint a { color: #1d9bf0; }
.mr-bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin-top: 8px; max-height: 176px; overflow-y: auto; padding: 2px; }
.mr-bdg-ic { height: 40px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--b-text); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mr-bdg-ic:hover { background: var(--b-hover); }
.mr-bdg-ic.on { border-color: #0053cb; background: rgba(0,83,203,.15); color: var(--mr-ub, var(--b-text)); }
.mr-bdg-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mr-bdg-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(128,128,128,.35); }
.mr-bdg-sw.on { border-color: var(--b-text); box-shadow: inset 0 0 0 2px var(--b-bg); }
.mr-bdg-pick { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: conic-gradient(#f4212e, #ffd400, #00ba7c, #1d9bf0, #7856ff, #f91880, #f4212e); cursor: pointer; }
.mr-bdg-pick input { position: absolute; inset: -8px; width: 46px; height: 46px; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mr-bdg-hex { width: 96px; height: 32px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.mr-bdg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--b-line); }
.mr-bdg-err { flex: 1; color: #f4212e; font-size: 13px; min-height: 1em; }
.mr-bdg-save { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--b-text); color: var(--b-bg); font-weight: 700; font-size: 15px; cursor: pointer; }
.mr-bdg-save:disabled { opacity: .5; cursor: default; }
@media (max-width: 575.98px) {
  .mr-bdg-back { padding: 0; align-items: stretch; }
  .mr-bdg-dlg { max-width: none; max-height: none; border-radius: 0; }
}
.mr-bdg-row.mr-bdg-confirm { border-color: rgba(244,33,46,.6); }
.mr-bdg-row.mr-bdg-confirm .mr-bdg-ib.del { width: auto; padding: 0 12px; border-radius: 999px; background: #f4212e; color: #fff; font-weight: 700; font-size: 13px; }

/* MR: wyrownanie przy nicku - znak odznaki bez pustych marginesow (pudelko = szerokosc znaku),
   ta sama wysokosc co znaczek weryfikacji (17px) i ten sam srodek co tekst nicku */
.mr-ubadges { margin-left: 0; gap: 4px; }
.mr-ubadge { width: auto; min-width: 0; height: 17px; font-size: 15px; }
.mr-ubadge > i { display: block; line-height: 17px; }
.mr-ubadges-lg { margin-left: 0; }
.mr-ubadges-lg .mr-ubadge { width: auto; height: 21px; font-size: 18px; }
.mr-ubadges-lg .mr-ubadge > i { line-height: 21px; }

/* dymek z nazwa odznaki (jak tooltip na X) */
.mr-ubadge[data-mr-tip] { cursor: default; outline: none; }
.mr-tip {
  position: fixed; left: 0; top: 0; z-index: 100001;
  max-width: 280px; padding: 6px 10px;
  border-radius: 6px;
  background: #000;
  color: #e7e9ea;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 12px rgba(255, 255, 255, .16), 0 2px 8px rgba(0, 0, 0, .5);
  font: 400 14px/18px "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease, visibility 0s linear .12s;
}
.mr-tip.on { opacity: 1; visibility: visible; transition: opacity .12s ease; }
html[data-mr-theme="light"] .mr-tip { color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 0 12px rgba(101, 119, 134, .35); }