.ahrefs-room {
  --ahr-ink: #f8f8fb;
  --ahr-copy: #aeb4c0;
  --ahr-line: rgba(255, 255, 255, .11);
  --ahr-panel: rgba(10, 13, 20, .93);
  --ahr-orange: #ff7a2f;
  --ahr-blue: #69a7ff;
  --ahr-green: #50e3b2;
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8rem) 0;
  color: var(--ahr-ink);
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 122, 47, .16), transparent 28rem),
    radial-gradient(circle at 91% 34%, rgba(105, 167, 255, .11), transparent 31rem),
    #06080d;
}

.ahrefs-room::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000 5%, transparent 92%);
}

.ahrefs-room *,
.ahrefs-room *::before,
.ahrefs-room *::after { box-sizing: border-box; }

.ahrefs-room__container {
  position: relative;
  z-index: 1;
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
}

.ahrefs-room__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .66fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ahrefs-room__kicker {
  margin: 0 0 .8rem;
  color: var(--ahr-orange);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ahrefs-room__heading h2,
.ahrefs-room__first-lot h3,
.ahrefs-room__tests h3 {
  margin: 0;
  color: var(--ahr-ink);
  font-weight: 620;
  letter-spacing: -.04em;
}

.ahrefs-room__heading h2 {
  max-width: 17ch;
  font-size: clamp(2.15rem, 4.7vw, 4.45rem);
  line-height: .98;
}

.ahrefs-room__heading > p,
.ahrefs-room__first-lot > div > p:last-child {
  margin: 0;
  color: var(--ahr-copy);
  font-size: 1rem;
  line-height: 1.75;
}

.ahrefs-room__console {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 26px;
  background: rgba(7, 9, 14, .91);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px);
}

.ahrefs-room__toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  min-height: 86px;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ahr-line);
  background: rgba(255, 255, 255, .025);
}

.ahrefs-room__brand {
  display: flex;
  gap: .8rem;
  align-items: center;
}

.ahrefs-room__brand > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 122, 47, .42);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 122, 47, .42), rgba(255, 122, 47, .08));
  font-size: 1rem;
  font-weight: 900;
}

.ahrefs-room__brand small,
.ahrefs-room__brand strong { display: block; }
.ahrefs-room__brand small,
.ahrefs-room__panel-head small { color: #858c99; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ahrefs-room__brand strong { margin-top: .15rem; font-size: .84rem; letter-spacing: .04em; }

.ahrefs-room__toolbar dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin: 0;
}

.ahrefs-room__toolbar dl div {
  min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid var(--ahr-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}

.ahrefs-room__toolbar dt,
.ahrefs-room__toolbar dd { margin: 0; }
.ahrefs-room__toolbar dt { color: #7e8592; font-size: .59rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.ahrefs-room__toolbar dd { overflow: hidden; margin-top: .2rem; color: #eff2f6; font-size: .77rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }

.ahrefs-room__status {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-self: end;
  padding: .58rem .75rem;
  border: 1px solid rgba(80, 227, 178, .27);
  border-radius: 999px;
  color: #c5ffed;
  background: rgba(80, 227, 178, .07);
  font-size: .7rem;
  font-weight: 760;
  white-space: nowrap;
}

.ahrefs-room__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ahr-green);
  box-shadow: 0 0 0 5px rgba(80, 227, 178, .1);
}

.ahrefs-room__workspace {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  border-bottom: 1px solid var(--ahr-line);
}

.ahrefs-room__request,
.ahrefs-room__evidence { min-width: 0; padding: clamp(1.4rem, 3vw, 2.2rem); }
.ahrefs-room__request { border-right: 1px solid var(--ahr-line); background: linear-gradient(145deg, rgba(255, 122, 47, .045), transparent 65%); }
.ahrefs-room__evidence { background: linear-gradient(145deg, rgba(105, 167, 255, .035), transparent 70%); }

.ahrefs-room__panel-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.ahrefs-room__panel-head h3 { margin: .25rem 0 0; color: #f7f8fa; font-size: 1.1rem; }
.ahrefs-room__panel-head > span { padding: .38rem .55rem; border-radius: 7px; color: #b9c0cb; background: rgba(255, 255, 255, .055); font-size: .66rem; font-weight: 760; }

.ahrefs-room__endpoint {
  display: flex;
  gap: .65rem;
  align-items: center;
  min-width: 0;
  padding: .8rem;
  border: 1px solid rgba(255, 122, 47, .24);
  border-radius: 11px;
  background: #080b11;
}
.ahrefs-room__endpoint b { padding: .32rem .4rem; border-radius: 5px; color: #160a03; background: var(--ahr-orange); font-size: .62rem; }
.ahrefs-room__endpoint code { overflow: hidden; color: #f0f2f5; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }

.ahrefs-room__params { display: grid; gap: .55rem; margin: .8rem 0 0; }
.ahrefs-room__params div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .7rem; padding: .7rem .78rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ahrefs-room__params dt,
.ahrefs-room__params dd { margin: 0; }
.ahrefs-room__params dt { color: #858c98; font-size: .65rem; font-weight: 760; text-transform: uppercase; }
.ahrefs-room__params dd { overflow-wrap: anywhere; color: #cfd4dc; font-size: .74rem; line-height: 1.45; }

.ahrefs-room__budget { margin-top: 1rem; padding: .9rem; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.ahrefs-room__budget > div { display: flex; gap: 1rem; justify-content: space-between; }
.ahrefs-room__budget span { color: #979eaa; font-size: .7rem; }
.ahrefs-room__budget strong { color: #f4f6f8; font-size: .72rem; }
.ahrefs-room__budget > i { display: block; overflow: hidden; height: 5px; margin: .65rem 0; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.ahrefs-room__budget > i b { display: block; width: 12.5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ahr-orange), #ffb15c); }
.ahrefs-room__budget small { color: #757d89; font-size: .62rem; }

.ahrefs-room__sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.ahrefs-room__sources article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; min-width: 0; padding: .85rem; border: 1px solid var(--ahr-line); border-radius: 12px; background: rgba(7, 10, 16, .78); }
.ahrefs-room__source-dot { display: block; width: 9px; height: 9px; margin-top: .22rem; border-radius: 50%; }
.ahrefs-room__source-dot--orange { background: var(--ahr-orange); box-shadow: 0 0 0 5px rgba(255, 122, 47, .11); }
.ahrefs-room__source-dot--blue { background: var(--ahr-blue); box-shadow: 0 0 0 5px rgba(105, 167, 255, .11); }
.ahrefs-room__source-dot--green { background: var(--ahr-green); box-shadow: 0 0 0 5px rgba(80, 227, 178, .11); }
.ahrefs-room__sources small,
.ahrefs-room__sources strong { display: block; }
.ahrefs-room__sources small { color: #7e8795; font-size: .6rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.ahrefs-room__sources strong { margin-top: .25rem; color: #f3f5f8; font-size: .78rem; line-height: 1.35; }
.ahrefs-room__sources p { margin: .5rem 0 0; color: #939aa6; font-size: .67rem; line-height: 1.45; }

.ahrefs-room__verdict { margin-top: .75rem; padding: 1.15rem; border: 1px solid rgba(105, 167, 255, .22); border-radius: 14px; background: rgba(105, 167, 255, .055); }
.ahrefs-room__verdict span,
.ahrefs-room__verdict strong { display: block; }
.ahrefs-room__verdict span { color: var(--ahr-blue); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ahrefs-room__verdict strong { margin-top: .4rem; color: #f7f9fb; font-size: 1rem; line-height: 1.4; }
.ahrefs-room__verdict p { margin: .55rem 0 0; color: #a6adba; font-size: .73rem; line-height: 1.55; }

.ahrefs-room__queue { padding: 1.2rem clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--ahr-line); }
.ahrefs-room__queue-head { display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .7rem; color: #868e9b; font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.ahrefs-room__queue-head strong { color: #c9ced6; font-size: .68rem; }
.ahrefs-room__row { display: grid; grid-template-columns: 2.2rem minmax(0, 1.5fr) minmax(8rem, .65fr) auto; gap: .8rem; align-items: center; padding: .78rem .8rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.ahrefs-room__row > span { color: #686f7b; font-size: .62rem; font-weight: 800; }
.ahrefs-room__row div { min-width: 0; }
.ahrefs-room__row small,
.ahrefs-room__row strong { display: block; }
.ahrefs-room__row small { overflow: hidden; color: #808895; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.ahrefs-room__row strong { margin-top: .22rem; color: #e8ebef; font-size: .76rem; }
.ahrefs-room__row > b { color: #9fa6b2; font-size: .68rem; font-weight: 600; }
.ahrefs-room__row > em { justify-self: end; padding: .38rem .55rem; border-radius: 999px; color: #bdc3cc; background: rgba(255, 255, 255, .055); font-size: .62rem; font-style: normal; font-weight: 760; }
.ahrefs-room__row--priority > em { color: #ffd3b9; background: rgba(255, 122, 47, .1); }

.ahrefs-room__tests { display: grid; grid-template-columns: minmax(15rem, .65fr) minmax(0, 1.35fr); gap: 1.5rem; padding: clamp(1.4rem, 3vw, 2.2rem); }
.ahrefs-room__tests h3 { max-width: 18ch; font-size: 1.25rem; line-height: 1.2; }
.ahrefs-room__tests ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ahrefs-room__tests li { min-width: 0; padding: .8rem; border: 1px solid var(--ahr-line); border-radius: 11px; background: rgba(255, 255, 255, .018); }
.ahrefs-room__tests li span,
.ahrefs-room__tests li strong,
.ahrefs-room__tests li small { display: block; }
.ahrefs-room__tests li span { color: var(--ahr-orange); font-size: .58rem; font-weight: 800; }
.ahrefs-room__tests li strong { margin-top: .35rem; color: #eff1f4; font-size: .72rem; }
.ahrefs-room__tests li small { margin-top: .25rem; color: #858d99; font-size: .63rem; line-height: 1.4; }

.ahrefs-room__first-lot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(255, 122, 47, .2);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255, 122, 47, .08), rgba(105, 167, 255, .035));
}
.ahrefs-room__first-lot h3 { max-width: 27ch; font-size: clamp(1.35rem, 2.4vw, 2.05rem); line-height: 1.14; }
.ahrefs-room__first-lot > div > p:last-child { max-width: 65rem; margin-top: .75rem; font-size: .88rem; }
.ahrefs-room__cta { min-height: 48px; border: 0; color: #160a03; background: var(--ahr-orange); font-weight: 800; }
.ahrefs-room__cta:hover { color: #140902; background: #ff9a60; }

.ahrefs-room__boundaries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.ahrefs-room__boundaries a { position: relative; min-width: 0; padding: 1rem; border: 1px solid var(--ahr-line); border-radius: 12px; color: #f4f6f8; background: rgba(8, 10, 15, .72); text-decoration: none; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.ahrefs-room__boundaries a::after { position: absolute; top: 1rem; right: 1rem; color: var(--ahr-orange); content: '↗'; }
.ahrefs-room__boundaries a:hover { border-color: rgba(255, 122, 47, .5); background: rgba(255, 122, 47, .055); transform: translateY(-2px); }
.ahrefs-room__boundaries span,
.ahrefs-room__boundaries strong,
.ahrefs-room__boundaries small { display: block; }
.ahrefs-room__boundaries span { color: #7f8794; font-size: .61rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.ahrefs-room__boundaries strong { margin: .32rem 1rem .3rem 0; font-size: .86rem; }
.ahrefs-room__boundaries small { color: #9299a5; font-size: .65rem; line-height: 1.45; }

@media (max-width: 1100px) {
  .ahrefs-room__toolbar { grid-template-columns: auto minmax(0, 1fr); }
  .ahrefs-room__status { grid-column: 1 / -1; justify-self: start; }
  .ahrefs-room__workspace { grid-template-columns: 1fr; }
  .ahrefs-room__request { border-right: 0; border-bottom: 1px solid var(--ahr-line); }
  .ahrefs-room__boundaries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .dark-page.api-integration-page .dark-hero-highlights { flex-wrap: wrap; overflow: visible; }
  .dark-page.api-integration-page .dark-hero-highlights li { flex: 0 1 auto; white-space: normal; }
  .ahrefs-room { padding: 4.5rem 0; }
  .ahrefs-room__container { width: calc(100% - 16px); }
  .ahrefs-room__heading { grid-template-columns: 1fr; gap: 1.25rem; }
  .ahrefs-room__heading h2 { font-size: clamp(2.15rem, 11vw, 3.35rem); }
  .ahrefs-room__heading > p { font-size: .94rem; }
  .ahrefs-room__console { border-radius: 16px; }
  .ahrefs-room__toolbar { grid-template-columns: 1fr; padding: .9rem; }
  .ahrefs-room__toolbar dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahrefs-room__status { grid-column: auto; }
  .ahrefs-room__request,
  .ahrefs-room__evidence,
  .ahrefs-room__queue,
  .ahrefs-room__tests { padding: 1rem; }
  .ahrefs-room__sources { grid-template-columns: 1fr; }
  .ahrefs-room__row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .ahrefs-room__row > b { grid-column: 2 / -1; }
  .ahrefs-room__tests { grid-template-columns: 1fr; }
  .ahrefs-room__tests h3 { max-width: none; }
  .ahrefs-room__tests ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahrefs-room__first-lot { grid-template-columns: 1fr; gap: 1.2rem; }
  .ahrefs-room__cta { width: 100%; white-space: normal; }
  .ahrefs-room__boundaries { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .ahrefs-room__toolbar dl,
  .ahrefs-room__tests ol { grid-template-columns: 1fr; }
  .ahrefs-room__params div { grid-template-columns: 1fr; gap: .25rem; }
  .ahrefs-room__queue-head { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .ahrefs-room__boundaries a { transition: none; }
}
