.cutoff-panel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 12px 14px;
  isolation: isolate;
}

.cutoff-panel__content {
  position: relative;
  z-index: 1;
}

.cutoff-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cutoff-panel__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #047857;
  flex: 0 0 auto;
}

.cutoff-panel__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.cutoff-panel__title {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}

.cutoff-panel__chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  color: #065f46;
  background: rgba(16, 185, 129, 0.14);
}

.cutoff-panel__line {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.cutoff-panel__meta {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.88;
}

.cutoff-panel--revision {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

.cutoff-panel--success {
  --cutoff-panel-success-bg: #ecfeff;
  --cutoff-panel-success-border: #7dd3fc;
  --cutoff-panel-success-glow-alpha: 0.35;
  --cutoff-panel-success-shimmer-duration: 1400ms;
  --cutoff-panel-success-shimmer-opacity: 0.45;
  --cutoff-panel-success-shimmer-band-width: 40%;
  --cutoff-panel-success-shimmer-blur: 8px;
  --cutoff-panel-success-shimmer-angle: 18deg;
  --cutoff-panel-success-sparkle-alpha: 0.4;
  --cutoff-panel-success-sparkle-duration: 650ms;
  --cutoff-panel-success-sparkle-rotation: 32deg;
  border-color: var(--cutoff-panel-success-border);
  background: var(--cutoff-panel-success-bg);
  color: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.cutoff-panel--success .cutoff-panel__title {
  color: #065f46;
}

.cutoff-panel--success .cutoff-panel__line {
  color: #0f172a;
}

.cutoff-panel--success .cutoff-panel__meta {
  color: #475569;
}

.cutoff-panel--glow {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 0 0 2px rgba(125, 211, 252, calc(var(--cutoff-panel-success-glow-alpha) * 0.35)),
    0 10px 26px rgba(14, 165, 233, calc(var(--cutoff-panel-success-glow-alpha) * 0.34));
}

.cutoff-panel--shimmer::before {
  content: "";
  position: absolute;
  inset: -24% -45%;
  z-index: 0;
  background:
    linear-gradient(
      var(--cutoff-panel-success-shimmer-angle),
      rgba(255, 255, 255, 0) 18%,
      rgba(255, 255, 255, calc(var(--cutoff-panel-success-shimmer-opacity) * 0.3)) 34%,
      rgba(255, 255, 255, var(--cutoff-panel-success-shimmer-opacity)) 50%,
      rgba(255, 255, 255, calc(var(--cutoff-panel-success-shimmer-opacity) * 0.3)) 66%,
      rgba(255, 255, 255, 0) 82%
    );
  opacity: 0;
  width: var(--cutoff-panel-success-shimmer-band-width);
  filter: blur(var(--cutoff-panel-success-shimmer-blur));
  transform: translateX(-65%);
  pointer-events: none;
  will-change: transform, opacity;
}

.cutoff-panel--success.is-shimmering-once::before {
  opacity: 1;
  animation: cutoffPanelShimmerOnce var(--cutoff-panel-success-shimmer-duration) cubic-bezier(.2,.75,.2,1) 1 forwards;
}

@keyframes cutoffPanelShimmerOnce {
  0% { transform: translateX(-130%); opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

.cutoff-panel__sparkles {
  position: absolute;
  left: 8px;
  top: 4px;
  width: 86px;
  height: 36px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.cutoff-sparkle {
  position: absolute;
  width: 16px;
  height: 16px;
  color: rgba(251, 191, 36, calc(0.75 + (0.25 * var(--cutoff-panel-success-sparkle-alpha))));
  filter:
    drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 1px 3px rgba(14, 165, 233, 0.28));
  transform: scale(0.5);
  opacity: 0;
}

.cutoff-sparkle--h0 {
  color: rgba(251, 191, 36, calc(0.75 + (0.25 * var(--cutoff-panel-success-sparkle-alpha))));
}

.cutoff-sparkle--h1 {
  color: rgba(255, 255, 255, calc(0.9 * var(--cutoff-panel-success-sparkle-alpha)));
}

.cutoff-sparkle--h2 {
  color: rgba(34, 197, 94, calc(0.6 + (0.4 * var(--cutoff-panel-success-sparkle-alpha))));
}

.cutoff-panel--success.is-sparkling .cutoff-panel__sparkles {
  opacity: 1;
}

.cutoff-panel--success.is-sparkling .cutoff-sparkle {
  animation: cutoffSparklePop var(--cutoff-panel-success-sparkle-duration) cubic-bezier(.16,.84,.24,1.08) 1 forwards var(--cutoff-sparkle-delay, 0ms);
  transform-origin: center center;
}

@keyframes cutoffSparklePop {
  0% { transform: scale(0.4) translateY(2px) rotate(0deg); opacity: 0; }
  16% { opacity: calc(0.8 + (0.2 * var(--cutoff-panel-success-sparkle-alpha))); }
  48% { transform: scale(1.38) translateY(-3px) rotate(calc(var(--cutoff-panel-success-sparkle-rotation) * 0.45)); opacity: 1; }
  100% { transform: scale(0.9) translateY(-7px) rotate(var(--cutoff-panel-success-sparkle-rotation)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cutoff-panel--success.is-shimmering-once::before,
  .cutoff-panel--success.is-sparkling .cutoff-sparkle {
    animation: none !important;
  }
  .cutoff-panel--shimmer::before {
    opacity: 0;
    transform: translateX(-65%);
  }
  .cutoff-panel__sparkles {
    display: none;
  }
}