.rankora-hp {
  position: absolute !important;
  inset-inline-start: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.rankora-traffic,
.rankora-security {
  --rk-public-night: #061629;
  --rk-public-blue: #1856f0;
  --rk-public-lime: #b9ff38;
  --rk-public-paper: #f5f8fc;
  --rk-public-line: #dbe4ef;
  --rk-public-muted: #637089;
  margin: 32px 0;
  color: #17243a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.rankora-traffic *,
.rankora-security * { box-sizing: border-box; }
.rankora-traffic [hidden],
.rankora-security [hidden] { display: none !important; }
.rk-public-heading { max-width: 760px; margin-bottom: 28px; }
.rk-public-heading h2 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; }
.rk-public-heading p { margin: 0; color: var(--rk-public-muted); }
.rk-public-kicker { color: var(--rk-public-blue); font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.rk-public-button {
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  padding: 10px 16px;
  background: var(--rk-public-blue);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.rk-public-button:hover { background: #0e42c5; }
.rk-public-link { border: 0; padding: 8px 0; background: transparent; color: var(--rk-public-blue); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.rk-traffic-consent { padding: 24px; border: 1px solid #cad8ea; border-radius: 18px; background: var(--rk-public-paper); }
.rk-traffic-consent p { margin: 7px 0 16px; color: var(--rk-public-muted); }
.rk-traffic-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rk-traffic-stats > div { min-width: 0; padding: 20px; border: 1px solid var(--rk-public-line); border-radius: 16px; background: #fff; }
.rk-traffic-stats strong { display: block; overflow-wrap: anywhere; color: var(--rk-public-blue); font-size: 1.55rem; line-height: 1.2; }
.rk-traffic-stats span { display: block; margin-top: 5px; color: var(--rk-public-muted); font-size: .82rem; }
.rk-traffic-context { display: flex; justify-content: space-between; gap: 18px; margin: 16px 0; padding: 14px 16px; border-radius: 12px; background: var(--rk-public-night); color: #fff; }
.rk-traffic-context span { color: #c9d6e7; text-align: end; }
.rk-traffic-map { display: grid; gap: 12px; margin: 18px 0; }
.rk-traffic-row { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(160px, 1.6fr) 48px; align-items: center; gap: 12px; }
.rk-traffic-path { overflow: hidden; color: #25334a; font-size: .84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rk-traffic-track { height: 15px; overflow: hidden; border-radius: 999px; background: #e7edf5; }
.rk-traffic-bar { height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, var(--rk-public-blue), #5c8cff); }
.rk-traffic-value { color: var(--rk-public-muted); font-variant-numeric: tabular-nums; text-align: end; }
.rk-traffic-empty { padding: 20px; border: 1px dashed #b7c7da; border-radius: 14px; color: var(--rk-public-muted); text-align: center; }
.rk-public-disclaimer { margin-top: 20px; padding: 16px 18px; border: 1px solid #f0d988; border-radius: 13px; background: #fff9de; color: #66520b; }
.rk-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rk-security-card { padding: 22px; border: 1px solid var(--rk-public-line); border-radius: 17px; background: #fff; box-shadow: 0 8px 25px rgba(6, 22, 41, .05); }
.rk-security-card h3 { margin: 14px 0 7px; font-size: 1.08rem; }
.rk-security-card p { margin: 0; color: var(--rk-public-muted); font-size: .92rem; }
.rk-security-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.rk-security-status--active { background: #e8ffc1; color: #355700; }
.rk-security-status--external { background: #edf2f8; color: #4c5a70; }

@media (max-width: 680px) {
  .rk-traffic-stats,
  .rk-security-grid { grid-template-columns: 1fr; }
  .rk-traffic-context { align-items: flex-start; flex-direction: column; }
  .rk-traffic-context span { text-align: start; }
  .rk-traffic-row { grid-template-columns: 1fr 44px; }
  .rk-traffic-track { grid-column: 1 / -1; grid-row: 2; }
}