:root {
  --squua-bg: #f4f4f5;
  --squua-panel: #ffffff;
  --squua-border: #dedede;
  --squua-text: #25262a;
  --squua-muted: #696b72;
  --squua-green: #229a62;
  --squua-red: #df2f35;
  --squua-orange: #e9992e;
}

.brand-text {
  color: #25262a;
  font-weight: 800;
  line-height: 1.1;
}

.user {
  color: var(--squua-muted);
  font-weight: 600;
}

.seo-provider-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.seo-logo {
  border: 1px solid #e3e3e5;
  border-radius: 8px;
  background: #f7f7f8;
  color: #25262a;
  font-size: 30px;
  font-weight: 900;
}

.seo-logo.critical {
  color: var(--squua-red);
  background: #fff0f0;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.quick-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}

.grid.cols-2,
.grid.cols-3,
.grid.cols-4 {
  gap: 24px;
}

.metric {
  border: 1px solid var(--squua-border);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  padding: 24px;
}

.metric strong {
  color: #25262a;
  font-size: 34px;
  font-weight: 900;
}

.metric span {
  color: var(--squua-muted);
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.btn,
button {
  border-radius: 5px;
}

.btn.subtle {
  background: #fff;
}

.btn.green {
  background: var(--squua-green);
  border-color: var(--squua-green);
  color: #fff;
}

.btn.red {
  background: var(--squua-red);
  border-color: var(--squua-red);
  color: #fff;
}

.notice.success,
.alert.success {
  border-color: #c8ead8;
  background: #e9f8ef;
  color: var(--squua-green);
}

.notice.danger,
.alert.error {
  border-color: #ffd1d4;
  background: #ffe8e9;
  color: var(--squua-red);
}

.progress {
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #e3e3e5;
  background: #f2f2f3;
}

.progress > span {
  background: #1f1f21;
}

@media (max-width: 1400px) {
  .seo-provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .seo-provider-grid {
    grid-template-columns: 1fr !important;
  }

  .brand-text {
    display: inline !important;
  }
}