.mzz-seo-card-wrapper {
      padding: 32px 40px;
      background: linear-gradient(145deg, #4c80f0 0%, #3d6edd 55%, #3664d1 100%);
      border-radius: 26px;
      box-shadow: 0 24px 40px rgba(15, 23, 42, 0.26);
      width: 640px;
      max-width: 96vw;
      color: #ffffff;
      position: relative;
    }

    .mzz-seo-card-wrapper::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 22px;
      pointer-events: none;
    }

    .mzz-seo-card-inner { position: relative; z-index: 1; }

    /* HEADER */

    .mzz-seo-header {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 24px;
    }

    .mzz-seo-header-icon {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: rgba(10, 22, 56, 0.32);
      border: 1px solid rgba(255, 255, 255, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* кружок-таргет как на макете */
    .mzz-seo-header-icon-target {
      width: 19px;
      height: 19px;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .mzz-seo-header-icon-target::before,
    .mzz-seo-header-icon-target::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.65);
    }

    .mzz-seo-header-icon-target::before {
      width: 13px;
      height: 13px;
      opacity: 0.8;
    }

    .mzz-seo-header-icon-target::after {
      width: 4px;
      height: 4px;
      background: #ffffff;
      border: none;
      opacity: 1;
    }

    .mzz-seo-header-text-title {
      font-size: 20px;
      line-height: 1.1;
      font-weight: 600;
      letter-spacing: 0.01em;
      margin-bottom: 4px;
    }

    .mzz-seo-header-subtitle {
      font-size: 12px;
      opacity: 0.85;
      margin-bottom: 8px;
    }

    .mzz-seo-header-description {
      font-size: 12px;
      line-height: 1.5;
      opacity: 0.95;
      max-width: 460px;
    }

    /* TOP CARDS */

    .mzz-seo-top-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }

    .mzz-seo-top-card {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      background: rgba(255, 255, 255, 0.08);
      padding: 10px 14px 12px;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 10px;
      row-gap: 4px;
      align-items: center;
    }

    .mzz-seo-top-card-iconwrap {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.26);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mzz-seo-top-card-iconwrap svg {
      width: 16px;
      height: 16px;
      stroke: rgba(255, 255, 255, 0.9);
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mzz-seo-top-card-body {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mzz-seo-top-card-label {
      font-size: 10px;
      opacity: 0.82;
    }

    .mzz-seo-top-card-value {
      font-size: 18px;
      font-weight: 600;
    }

    .mzz-seo-top-card-caption {
      font-size: 11px;
      opacity: 0.9;
    }

    /* CHART BLOCK */

    .mzz-seo-chart-block {
      margin-top: 4px;
      border-radius: 18px;
      padding: 16px 18px 18px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      background: radial-gradient(circle at top, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.0) 100%);
    }

    .mzz-seo-chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .mzz-seo-chart-title {
      font-size: 12px;
      font-weight: 500;
    }

    .mzz-seo-chart-subtitle {
      font-size: 10px;
      opacity: 0.75;
      margin-bottom: 10px;
    }

    .mzz-seo-legend {
      display: inline-flex;
      gap: 12px;
      align-items: center;
      font-size: 10px;
    }

    .mzz-seo-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mzz-seo-legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      opacity: 0.8;
    }

    .mzz-visibility { opacity: 0.9; }
    .mzz-engagement { opacity: 0.6; }

    .mzz-seo-chart-canvas-wrap {
      margin-top: 4px;
      margin-bottom: 12px;
      height: 170px;
    }

    /* BOTTOM METRICS */

    .mzz-seo-bottom-metrics {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      margin-top: 2px;
    }

    .mzz-seo-bottom-item {
      text-align: center;
      flex: 1;
    }

    .mzz-seo-bottom-value {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .mzz-seo-bottom-label {
      font-size: 11px;
      opacity: 0.9;
    }

    @media (max-width: 640px) {
      .mzz-seo-card-wrapper {
        padding: 24px 20px;
        border-radius: 22px;
      }

      .mzz-seo-top-cards {
        grid-template-columns: 1fr;
      }

      .mzz-seo-bottom-metrics {
        flex-direction: column;
        gap: 10px;
      }
    }