@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.mp-site .zzz-badge.t-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  border-radius: 6px;
  padding: 6px 14px;
  min-width: 48px;
  text-align: center;
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  line-height: 1;
  vertical-align: middle;
}

.mp-site .zzz-badge.t-default.b-sm { font-size: 0.75rem; padding: 4px 10px; min-width: 36px; }
.mp-site .zzz-badge.t-default.b-md { font-size: 0.85rem; padding: 6px 14px; min-width: 48px; }
.mp-site .zzz-badge.t-default.b-lg { font-size: 1.4rem; padding: 12px 28px; min-width: 80px; border-radius: 8px; }



.mp-site .zzz-badge.t-default { font-family: 'Exo 2', sans-serif; }


.mp-site .zzz-badge.t-default.b-c   { background: #6b7280; color: #d1d5db; }
.mp-site .zzz-badge.t-default.b-b   { background: linear-gradient(135deg, #2dd4bf, #14b8a6); color: #fff; }
.mp-site .zzz-badge.t-default.b-a   { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; }
.mp-site .zzz-badge.t-default.b-s   { background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; }
.mp-site .zzz-badge.t-default.b-sp  { background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; box-shadow: 0 0 8px rgba(249,115,22,0.4); }

.mp-site .zzz-badge.t-default.b-ex {
  background:
    conic-gradient(from var(--angle), #ff0000, #ff8800, #ffee00, #00ff44, #0088ff, #8800ff, #ff0088, #ff0000),
    linear-gradient(#fff, #fff),
    conic-gradient(from var(--angle), #ff0000, #ff8800, #ffee00, #00ff44, #0088ff, #8800ff, #ff0088, #ff0000);
  background-origin: border-box;
  -webkit-background-clip: text, padding-box, border-box;
  background-clip: text, padding-box, border-box;
  -webkit-text-fill-color: transparent;
  border: 3px solid transparent;
  font-weight: 900;
  animation: zzz-rainbow-spin 2.5s linear infinite;
}
.mp-site .zzz-badge.t-default.b-ex.b-lg { border-width: 4px; }



@keyframes zzz-rainbow-spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-site .zzz-badge.t-default,
  .mp-site .zzz-badge.t-default::before,
  .mp-site .zzz-badge.t-default::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 600px) {
  .mp-site .zzz-badge.t-default { font-size: 0.75rem; padding: 5px 10px; min-width: 40px; }
  .mp-site .zzz-badge.t-default.b-lg { font-size: 1.1rem; padding: 10px 20px; min-width: 64px; }
}