.gads-brand-chart { margin: 16px 0; }

.gads-grid { display: grid; gap: 14px; }
.gads-grid-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 980px) { .gads-grid-3-2 { grid-template-columns: 1fr; } }

.gads-card-title { font-weight: 600; margin: 0 0 8px 0; }
.gads-canvas-wrap { position: relative; height: 220px; min-width: 0; }
.gads-canvas-wrap canvas { width: 100% !important; height: 100% !important; }
.gads-updated { font-size: 12px; color: #6b7280; margin-top: 6px; }
.gads-mt { margin-top: 14px; }

.gads-table-wrap { overflow: auto; }
.gads-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gads-table th, .gads-table td {
  border-bottom: 1px solid #eef0f5;
  padding: 10px 8px;
  vertical-align: middle;
}
.gads-table th {
    font-size: 12px;
    line-height: 1.5em;
    color: #6b6b6b;
    font-weight: 400;
}

/* flags fixed 20x15 */
.gads-col-flag { width: 35px; }
.gads-flag {
  width: 20px !important;
  height: 15px !important;
  min-width: 20px !important;
  min-height: 15px !important;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.gads-country-chart .gads-flag {
  width: 50px !important;
  height: 35px !important;
  min-width: 50px !important;
  min-height: 35px !important;
}
.gads-table td.gads-col-flag, .gads-table th.gads-col-flag { white-space: nowrap; }

.gads-col-country { min-width: 160px; }

.gads-col-last, .gads-col-ig, .gads-col-sb,
.gads-col-rank, .gads-col-ms,
.gads-col-igrank, .gads-col-igms,
.gads-col-sbrank, .gads-col-sbms {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gads-col-rank, .gads-col-igrank, .gads-col-sbrank { width: 70px; }
.gads-col-ms, .gads-col-igms, .gads-col-sbms { width: 80px; }
.gads-col-last, .gads-col-ig, .gads-col-sb { width: 110px; }

.gads-link { text-decoration: none; }
.gads-link:hover { text-decoration: underline; }

.gads-more-wrap {
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.gads-btn {
  border: 2px solid #d6dae3;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.gads-btn:hover {
  border: 2px solid #f6bb3e;
}
.gads-btn:disabled { opacity: .6; cursor: default; }
.gads-loading { font-size: 12px; color: #6b7280; }

/* sorting */
.gads-sort { cursor: pointer; user-select: none; }
.gads-sort::after { content: ""; display: inline-block; margin-left: 6px; opacity: .35; }
.gads-sort.is-sort-desc::after { content: "↓"; opacity: .7; }
.gads-sort.is-sort-asc::after  { content: "↑"; opacity: .7; }

/* inline dyn inside value cell */
.gads-val { line-height: 1.1; }
.gads-dyn-inline {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.15;
  color: #4b5563;
  display: grid;
  gap: 2px;
}

/* mini charts */
.gads-col-trend { width: 180px; }
.gads-col-trend2 { width: 200px; }
.gads-mini-wrap { width: 100%; height: 36px; }
.gads-mini { width: 100% !important; height: 36px !important; display:block; }

/* locks */
.gads-lock { display:inline-flex; vertical-align: middle; }
.gads-lock svg { display:block; }
.gads-lock-orange { color: #f6bb3e; }
.gads-lock-gray { color: #9aa4b2; }
.gads-lock svg path {
    fill: silver;
}

/* demo blurred chart placeholder (trend2) */
.gads-demo-chart-blur {
  position: relative;
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px dashed #e5e7eb;
  overflow: hidden;
}
.gads-demo-chart-blur-inner {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.03)),
    repeating-linear-gradient(
      135deg,
      rgba(246,187,62,0.06),
      rgba(246,187,62,0.06) 10px,
      rgba(0,0,0,0.04) 10px,
      rgba(0,0,0,0.04) 20px
    );
  filter: blur(1.2px);
}
.gads-demo-chart-lock {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* filters */
.gads-filters { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.gads-filter-btn.is-active {
  color: #1f8f3a;
  border-color: #1f8f3a;
  background: transparent;
}
.gads-filter-btn.is-disabled {
  color: #9aa4b2;
  border-color: #cfd6df;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

/* dyn colors */
.color-red { color: #e53935; font-weight: 600; }
.color-green { color: #16a34a; font-weight: 600; }

/* NEW column */
.gads-col-new { width: 90px; text-align: left; }
.gads-new-tags {
  color: #16a34a;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.15;
}