body {
      font-family: 'Inter', sans-serif;
      background-color: #f8f9fb;
      margin: 0;
      padding: 10px;
    }
    .container {
      max-width: 1240px;
      margin: auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(0,0,0,0.04);
      padding: 40px;
    }
    h2 {
      margin-top: 0;
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 12px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 30px;
    }
    th, td {
      text-align: left;
      padding: 8px 10px;
      font-size: 13px;
    }
    th {
      background-color: #f1f4f8;
      font-weight: 600;
    }
    tr:nth-child(even) td {
      background-color: #f9fbfd;
    }
    .metric-table th {
      background-color: #e9eff7;
    }
    .section-title {
      font-size: 16px;
      font-weight: 700;
      margin: 16px 0 8px;
    }
	.metrics-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
      margin-bottom: 40px;
    }

    .metric-box {
      flex: 1 1 calc(16.66% - 20px);
      background: white;
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      padding: 20px;
      text-align: center;
      min-width: 160px;
    }

    .metric-icon {
      font-size: 24px;
      display: block;
      margin-bottom: 10px;
    }

    .metric-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 6px;
    }

    .metric-value {
      font-size: 22px;
      font-weight: 600;
      color: #007b83;
    }
	.metric-source {
	  font-size: 10px;
	  color: #777;
	  margin-top: 6px;
	  display: flex;
	  align-items: center;
	  justify-content: center; /* keeps it centered under value */
	  gap: 4px; /* space between icon and text */
	}

	.metric-source-icon {
	  font-size: 12px; /* slightly smaller than text */
	  opacity: 0.8;
	}
	@media (max-width: 768px) {
      .metric-box {
        flex: 1 1 calc(50% - 20px);
      }
    }

    @media (max-width: 480px) {
      .metric-box {
        flex: 1 1 100%;
      }
    }
	.seo-table {
    width: 100%;
    max-width: 668px;
    margin: 0 auto 32px auto;
    border-collapse: collapse;
    background: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  }

  .seo-table thead {
    background: #f6f9fc;
    color: #333333;
  }

  .seo-table thead th {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
  }

  .seo-table tbody td,
  .seo-table tbody th {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid #e8e8e8;
    color: #222222;
  }

  .seo-table tbody tr:last-child {
    background: #f0f4ff;
    font-weight: bold;
  }

  @media (max-width: 768px) {
    .seo-table thead {
      display: none;
    }

    .seo-table, .seo-table tbody, .seo-table tr, .seo-table td {
      display: block;
      width: 100%;
    }

    .seo-table tr {
      margin-bottom: 16px;
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .seo-table td {
      padding: 10px 14px;
      text-align: right;
      position: relative;
    }

    .seo-table td::before {
      content: attr(data-label);
      position: absolute;
      left: 14px;
      top: 10px;
      font-weight: bold;
      color: #666;
      text-align: left;
    }
  }
	.table-graph-container {
	  display: flex;
	  gap: 30px;
	  margin-top: 20px;
	  max-width: 1240px;
	  margin-left: auto;
	  margin-right: auto;
	  flex-wrap: wrap;
	}

	.performance-table {
	  flex: 1;
	  min-width: 660px;
	  overflow-x: auto;
	}
	.metric-change { font-size: 12px; margin-top: 6px; }
	.change-positive { color: #15803d; } /* green */
	.change-negative { color: #dc2626; } /* red */
	.change-neutral  { color: #6b7280; }  /* gray */

	.performance-table table {
	  width: 100%;
	  border-collapse: collapse;
	  font-family: Arial, sans-serif;
	  font-size: 14px;
	}

	.performance-table th,
	.performance-table td {
	  border: 1px solid #ddd;
	  padding: 8px 12px;
	  text-align: center;
	}

	.performance-table th {
	  background-color: #f5f5f5;
	  font-weight: bold;
	}

	.performance-chart {
	  flex: 1;
	  min-width: 400px;
	  padding: 10px;
	}

	.performance-chart canvas {
	  width: 100% !important;
	  max-height: 300px;
	}
	table {
		border: 1px solid #ddd;
	  }
	  th, td {
		padding: 8px;
		text-align: center;
		border: 1px solid #ddd;
	  }
	  th {
		background-color: #f8f8f8;
	  }
	.performance-chart,
	.traffic-chart {
	  height: 250px;
	  position: relative;
	}

	.performance-chart canvas,
	.traffic-chart canvas {
	  width: 100% !important;
	  height: 100% !important;
	}
	.table-chart-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
  }

  .table-section, .chart-section {
    flex: 0 0 48%;
    min-width: 300px;
  }

  .table-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .table-section th, .table-section td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }

  .table-section thead {
    background-color: #f4f4f4;
  }

  .chart-section {
    height: 260px;
  }

  .chart-section canvas {
    width: 100% !important;
    height: 100% !important;
  }
  .table-graph-wrapper {
	  display: flex;
	  gap: 2%;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  margin-bottom: 40px;
	}

	.metric-table {
	  flex: 0 0 48%;
	  max-width: 48%;
	}

	.metric-table table {
	  width: 100%;
	  border-collapse: collapse;
	  font-size: 15px;
	}

	.metric-table th,
	.metric-table td {
	  text-align: left;
	  padding: 8px 10px;
	  border-bottom: 1px solid #e0e0e0;
	}

	.metric-table th {
	  background: #f4f4f4;
	  font-weight: 600;
	}

	.metric-graph {
	  flex: 0 0 48%;
	  max-width: 48%;
	}

	.metric-graph canvas {
	  width: 100%;
	  height: 280px;
	}