/* Rackoryn V87 — hero Tunnel IP, corporate premium. */
.rk87-service-panel{
  color:#eef4ff;
  background:linear-gradient(180deg,#0b1729 0%,#091321 100%);
  border:1px solid #2b405e;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 52px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
  min-width:0;
}
.rk87-panel-head{
  min-height:68px;
  padding:16px 18px;
  border-bottom:1px solid #223652;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.rk87-panel-head>div{display:grid;gap:3px;min-width:0}
.rk87-panel-kicker{
  color:#7f93b3;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.16em;
}
.rk87-panel-head strong{
  color:#f3f6fd;
  font:700 1.05rem/1.2 "Manrope",system-ui,sans-serif;
  letter-spacing:-.025em;
}
.rk87-panel-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid #2d4b5c;
  border-radius:999px;
  color:#9db8c5;
  background:#0b1b29;
  font-size:.62rem;
  white-space:nowrap;
}
.rk87-panel-state i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#50c596;
  box-shadow:0 0 0 3px rgba(80,197,150,.08);
}
.rk87-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:16px 18px 0;
  padding:3px;
  border:1px solid #233752;
  border-radius:10px;
  background:#07111f;
}
.rk87-tabs button{
  min-height:34px;
  padding:6px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#8498b8;
  font:600 .69rem/1.2 "IBM Plex Sans",system-ui,sans-serif;
  cursor:pointer;
}
.rk87-tabs button:hover{color:#d9e4f6}
.rk87-tabs button[aria-pressed="true"]{
  color:#eae7ff;
  background:#171d35;
  box-shadow:inset 0 0 0 1px #4f4775;
}
.rk87-topology{padding:20px 18px 17px}
.rk87-topology-title{
  margin:0 0 18px;
  color:#dce6f6;
  font-size:.78rem;
  font-weight:600;
  text-align:center;
}
.rk87-route-row{
  display:grid;
  grid-template-columns:minmax(112px,1fr) minmax(125px,1.15fr) minmax(112px,1fr);
  align-items:center;
  gap:13px;
}
.rk87-endpoint{
  min-width:0;
  min-height:118px;
  padding:12px;
  border:1px solid #263d5b;
  border-radius:11px;
  background:#0a192a;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.rk87-endpoint-label{
  margin-bottom:8px;
  color:#6f85a5;
  font-size:.49rem;
  font-weight:700;
  letter-spacing:.16em;
}
.rk87-endpoint-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:#9c8fff;
  margin-bottom:9px;
}
.rk87-endpoint-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rk87-endpoint-icon--cyan{color:#77bbcd}
.rk87-endpoint strong{
  color:#eef3fb;
  font-size:.68rem;
  line-height:1.35;
  font-weight:650;
}
.rk87-endpoint small{
  margin-top:4px;
  color:#8298b7;
  font-size:.57rem;
  line-height:1.35;
}
.rk87-link{
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:7px;
  color:#9c8fff;
}
.rk87-link span{
  height:1px;
  background:#52647e;
  position:relative;
}
.rk87-link span:first-child::after,.rk87-link span:last-child::before{
  content:"";
  position:absolute;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7e6ce6;
  transform:translateY(-50%);
}
.rk87-link span:first-child::after{right:-1px}
.rk87-link span:last-child::before{left:-1px;background:#6caec2}
.rk87-link b{
  padding:8px 10px;
  border:1px solid #514b77;
  border-radius:8px;
  background:#171b30;
  color:#d9d3ff;
  font-size:.56rem;
  letter-spacing:.08em;
  white-space:nowrap;
}
.rk87-specs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 18px 17px;
  border:1px solid #223752;
  border-radius:10px;
  overflow:hidden;
}
.rk87-specs>div{
  padding:11px 13px;
  min-width:0;
  background:#091827;
}
.rk87-specs>div:nth-child(even){border-left:1px solid #223752}
.rk87-specs>div:nth-child(n+3){border-top:1px solid #223752}
.rk87-specs span{
  display:block;
  color:#6f84a4;
  font-size:.48rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}
.rk87-specs strong{
  display:block;
  margin-top:4px;
  color:#bccbe0;
  font-size:.65rem;
  font-weight:500;
  line-height:1.4;
}
.rk87-panel-foot{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:11px 18px;
  border-top:1px solid #223652;
  color:#7186a6;
  background:#07111e;
  font-size:.55rem;
  line-height:1.45;
}
.rk87-panel-foot svg{
  width:13px;
  height:13px;
  flex:0 0 13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-top:1px;
}

html[data-theme="light"] .rk87-service-panel{
  color:#17223a;
  background:linear-gradient(180deg,#ffffff,#f7f9fc);
  border-color:#d5deea;
  box-shadow:0 18px 50px rgba(22,40,74,.08),inset 0 1px 0 #fff;
}
html[data-theme="light"] .rk87-panel-head{border-bottom-color:#e1e7ef}
html[data-theme="light"] .rk87-panel-kicker{color:#78869c}
html[data-theme="light"] .rk87-panel-head strong{color:#152137}
html[data-theme="light"] .rk87-panel-state{background:#f3faf6;border-color:#d5e9dc;color:#4a7c65}
html[data-theme="light"] .rk87-tabs{background:#f3f6fa;border-color:#dce3ec}
html[data-theme="light"] .rk87-tabs button{color:#65748b}
html[data-theme="light"] .rk87-tabs button:hover{color:#18233a}
html[data-theme="light"] .rk87-tabs button[aria-pressed="true"]{background:#fff;color:#5b4fe0;box-shadow:0 1px 4px rgba(31,49,80,.08),inset 0 0 0 1px #cfc8f6}
html[data-theme="light"] .rk87-topology-title{color:#283750}
html[data-theme="light"] .rk87-endpoint{background:#fbfcfe;border-color:#dbe3ed}
html[data-theme="light"] .rk87-endpoint-label{color:#8290a5}
html[data-theme="light"] .rk87-endpoint strong{color:#1d2a40}
html[data-theme="light"] .rk87-endpoint small{color:#6f8097}
html[data-theme="light"] .rk87-link span{background:#bdc9d8}
html[data-theme="light"] .rk87-link b{background:#f8f8fe;border-color:#d5d0f0;color:#5e55b6}
html[data-theme="light"] .rk87-specs{border-color:#dde4ed}
html[data-theme="light"] .rk87-specs>div{background:#fbfcfe}
html[data-theme="light"] .rk87-specs>div:nth-child(even),html[data-theme="light"] .rk87-specs>div:nth-child(n+3){border-color:#dde4ed}
html[data-theme="light"] .rk87-specs span{color:#8492a7}
html[data-theme="light"] .rk87-specs strong{color:#3d4c64}
html[data-theme="light"] .rk87-panel-foot{background:#f5f7fa;border-color:#dde4ed;color:#75869d}

@media(max-width:1100px){
  .rk87-panel-head{padding-inline:15px}
  .rk87-panel-state{font-size:.57rem}
  .rk87-tabs{margin-inline:15px}
  .rk87-topology{padding-inline:15px}
  .rk87-specs{margin-inline:15px}
  .rk87-route-row{gap:9px}
  .rk87-endpoint{padding:10px}
  .rk87-link b{padding-inline:7px}
}
@media(max-width:920px){
  .rk87-service-panel{width:100%;max-width:640px;justify-self:center}
}
@media(max-width:560px){
  .rk87-panel-head{align-items:flex-start;flex-direction:column;gap:10px}
  .rk87-panel-state{white-space:normal}
  .rk87-tabs{grid-template-columns:1fr;margin-top:12px}
  .rk87-tabs button{min-height:32px}
  .rk87-topology{padding-top:16px}
  .rk87-route-row{grid-template-columns:1fr;gap:9px}
  .rk87-endpoint{min-height:92px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:11px;align-items:center}
  .rk87-endpoint-label{grid-column:1/-1;margin-bottom:4px}
  .rk87-endpoint-icon{grid-row:2/4;margin:0}
  .rk87-endpoint strong{align-self:end}
  .rk87-endpoint small{align-self:start}
  .rk87-link{grid-template-columns:1fr;justify-items:center;gap:5px;padding:2px 0}
  .rk87-link span{width:1px;height:12px}
  .rk87-link span:first-child::after,.rk87-link span:last-child::before{display:none}
  .rk87-specs{grid-template-columns:1fr}
  .rk87-specs>div:nth-child(even){border-left:0}
  .rk87-specs>div+div{border-top:1px solid #223752}
  html[data-theme="light"] .rk87-specs>div+div{border-top-color:#dde4ed}
}