@layer components {
  .support-widget-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 166, 79, 0.32);
    background:
      radial-gradient(circle at top right, rgba(255, 175, 73, 0.24), transparent 34%),
      radial-gradient(circle at bottom left, rgba(255, 91, 46, 0.24), transparent 40%),
      linear-gradient(180deg, rgba(29, 18, 10, 0.98), rgba(17, 15, 14, 0.96));
    box-shadow:
      0 26px 60px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .support-widget-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 28%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 55%);
  }

  .support-widget-card > * {
    position: relative;
    z-index: 1;
  }

  .support-widget-copy-block {
    display: grid;
    gap: 8px;
  }

  .support-widget-title {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff8ef;
  }

  .support-widget-copy {
    margin: 0;
    color: #ffd9bb;
    font-size: 0.8rem;
    line-height: 1.42;
  }

  .support-widget-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff9f45, #ff5b2e);
    color: #fffaf3;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow:
      0 18px 34px rgba(255, 91, 46, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
    animation: supportWidgetPulse 3s ease-in-out infinite;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      filter 0.18s ease;
  }

  @keyframes supportWidgetPulse {
    0%, 100% {
      transform: translateY(0) scale(1);
      box-shadow:
        0 18px 34px rgba(255, 91, 46, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    50% {
      transform: translateY(-1px) scale(1.015);
      box-shadow:
        0 22px 40px rgba(255, 91, 46, 0.3),
        0 0 0 6px rgba(255, 163, 86, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }
  }

  .support-widget-btn:hover,
  .support-widget-btn:focus-visible {
    animation-play-state: paused;
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
      0 24px 40px rgba(255, 91, 46, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .support-widget-qr-shell {
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
      rgba(8, 11, 16, 0.48);
  }

  .support-widget-qr {
    display: block;
    width: min(100%, 156px);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 8px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }

  .support-widget-note {
    margin: 0;
    color: rgba(255, 231, 212, 0.82);
    font-size: 0.76rem;
    line-height: 1.45;
    text-align: center;
  }

}