:root { --card-bg:#fff; --card-border:#eee; }

    .gauge-card{
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      padding: 14px 14px 10px;
      border: 1px solid var(--card-border);
      border-radius: 14px;
      background: var(--card-bg);
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    .gauge-head{
      display:flex;
      gap:10px;
      align-items:flex-start;
      justify-content:space-between;
      margin-bottom: 10px;
    }

    .gauge-title{ font: 700 24px/1.2 Arial, sans-serif; color:#222; }
    .gauge-sub{ font: 16px/1.2 Arial, sans-serif; color:#777; margin-top:4px; }

    .gauge-badges{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .badge{
      font: 12px/1 Arial, sans-serif;
      padding:6px 8px;
      border-radius: 999px;
      border:1px solid #eee;
      background:#fafafa;
      color:#333;
      white-space:nowrap;
    }
   
    .gaugeSvg{ width:100%; height:auto; display:block; }
    .needle{
      transform-origin: 150px 150px;
      transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }
    .gaugeSvg.over-100{ filter: drop-shadow(0 0 10px rgba(67,160,71,.55)); }

    /* Barra horizontal */
    .progress{
      margin-top: 8px;
      height: 10px;
      width: 100%;
      background: #f1f1f1;
      border-radius: 999px;
      overflow:hidden;
    }
    .progress > .bar{
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #e53935, #fbc02d, #43a047);
      transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .progress > .bar.over{ background: #43a047; }

    .meta-row{
      margin-top: 10px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .meta{
      padding:10px;
      border:1px solid #eee;
      border-radius: 12px;
      background:#fcfcfc;
    }
    .meta .k{
      font: 12px/1 Arial, sans-serif;
      color:#666;
      margin-bottom:6px;
    }
    .meta .v{
      font: 700 13px/1 Arial, sans-serif;
      color:#222;
    }
    .meta .s{
      margin-top:6px;
      font: 12px/1 Arial, sans-serif;
      color:#666;
    }

    @media (max-width: 520px){
      .meta-row{ grid-template-columns: 1fr; }
      .gauge-badges{ justify-content:flex-start; }
    }