@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700;800&display=swap');

    .tvsfa-scene { display: flex; justify-content: center; padding: 40px 24px; perspective: 1400px; }
    .tvsfa-card {
      position: relative; width: 500px; max-width: 100%; box-sizing: border-box;
      padding: 30px 32px 32px; border-radius: 28px;
      border: 1px solid rgba(255,255,255,0.09);
      background: linear-gradient(180deg, #1A1B1F 0%, #121316 60%, #0E0F12 100%);
      box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.04);
      overflow: hidden; font-family: 'Manrope', system-ui, sans-serif;
      opacity: 0; transform: perspective(1400px) translateY(48px) rotateY(-55deg) scale(0.97);
      transform-origin: center center; transform-style: preserve-3d;
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
      will-change: transform, opacity;
    }
    .tvsfa-glow {
      position: absolute; right: -60px; bottom: -80px; width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(59,130,246,0.55) 0%, rgba(139,92,246,0.28) 45%, transparent 70%);
      filter: blur(70px); pointer-events: none; z-index: 0;
    }
    .tvsfa-card[data-accent="red"] { background: linear-gradient(180deg, #221417 0%, #161011 60%, #0E0B0C 100%); }
    .tvsfa-card[data-accent="red"] .tvsfa-glow {
      background: radial-gradient(circle, rgba(239,68,68,0.50) 0%, rgba(217,70,239,0.24) 45%, transparent 70%);
    }
    .tvsfa-card > *:not(.tvsfa-glow) { position: relative; z-index: 1; }

    .tvsfa-el { opacity: 0; transform: perspective(1000px) translateY(18px) rotateY(-28deg); backface-visibility: hidden; }

    .tvsfa-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .tvsfa-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 17px; color: #F4F4F5;
      letter-spacing: -0.01em; line-height: 1.35; }
    .tvsfa-badge { flex: none; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px;
      color: #fff; background: #C2620F; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
    .tvsfa-badge--urgent { background: #DC2626; }

    .tvsfa-mid { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; }
    .tvsfa-value { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 44px; color: #fff;
      letter-spacing: -0.02em; line-height: 1; }
    .tvsfa-value .tvsfa-unit { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 17px; color: #A1A1AA; letter-spacing: 0; }
    .tvsfa-sub { margin-top: 12px; font-size: 14px; color: #8B8B93; }

    .tvsfa-ring { position: relative; flex: none; width: 118px; height: 118px; }
    .tvsfa-ring svg { display: block; }
    .tvsfa-arc { stroke: #3B82F6; filter: drop-shadow(0 0 6px rgba(59,130,246,0.5)); transition: stroke-dashoffset 60ms linear; }
    .tvsfa-card[data-accent="red"] .tvsfa-arc { stroke: #EF4444; filter: drop-shadow(0 0 6px rgba(239,68,68,0.55)); }
    .tvsfa-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 1px; }
    .tvsfa-ring-label b { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 24px; color: #fff; }
    .tvsfa-ring-label span { font-size: 11px; color: #8B8B93; }

    .tvsfa-body { margin-top: 26px; font-size: 14px; line-height: 1.6; color: #9A9AA2; text-wrap: pretty; }

    .tvsfa-btn { margin-top: 26px; width: 100%; border: 1px solid rgba(59,130,246,0.45); cursor: pointer;
      background: rgba(37,99,235,0.30); color: #EAF1FF; border-radius: 16px; padding: 16px;
      font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 16px;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 200ms, transform 150ms, box-shadow 300ms; }
    .tvsfa-btn span { transition: margin-left 150ms; }
    .tvsfa-btn:hover { background: rgba(37,99,235,0.48); box-shadow: 0 0 0 4px rgba(59,130,246,0.16); }
    .tvsfa-btn:hover span { margin-left: 4px; }
    .tvsfa-btn:active { transform: scale(0.98); }

    @media (max-width: 540px) {
      .tvsfa-card { padding: 24px; border-radius: 22px; width: 100%; }
      .tvsfa-value { font-size: 38px; }
      .tvsfa-mid { gap: 12px; }
      .tvsfa-ring, .tvsfa-ring svg { width: 96px; height: 96px; }
      .tvsfa-scene{
        padding: 40px 0;
      }
    }